Scala ReactComponentB类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› Scala›Scala教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了Scala中japgolly.scalajs.react.ReactComponentB类的典型用法代码示例。如果您正苦于以下问题：Scala ReactComponentB类的具体用法？Scala ReactComponentB怎么用？Scala ReactComponentB使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。

在下文中一共展示了ReactComponentB类的20个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的Scala代码示例。

示例1: LayoutComponent

//设置package包名称以及导入依赖的类
package components

import app.AppRouter.Page
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.{ Resolution, RouterCtl }
import chandu0101.scalajs.react.components.materialui.{ MuiAppBar, MuiFlatButton, MuiMuiThemeProvider }
import japgolly.scalajs.react.ReactComponentB
import utils.ReactTags
import chandu0101.scalajs.react.components.Implicits._
import react.DropMenu
import scala.language.existentials
import scala.language.postfixOps


object LayoutComponent extends ReactTags {

  case class Props(c: RouterCtl[Page], r: Resolution[Page])

  def theTopBar(props: Props) = MuiMuiThemeProvider()(
    MuiAppBar(
      title = "???????",
      //  onLeftIconButtonTouchTap = CallbackDebug.f1("onLeftIconButtonTouchTap"),
      //  onRightIconButtonTouchTap = CallbackDebug.f1("onRightIconButtonTouchTap"),
      //  onTitleTouchTap = CallbackDebug.f1("onTitleTouchTap"),
      showMenuIconButton = true,
      iconElementLeft = DropMenu(props.c, props.r.page),
      iconElementRight = MuiFlatButton(href = "/logout", key = "logoutbut", label = "?????", primary = true)()
    )()
  )

  case class Backend($: BackendScope[Props, Unit]) {
    def mounted() = Callback.empty

    def render(props: Props) = {
      <.div(
        theTopBar(props),
        <.div(
          props.r.render()
        )
      )
    }
  }

  private val component = ReactComponentB[Props]("LayoutComponent")
    .renderBackend[Backend]
    .componentDidMount(_.backend.mounted())
    .build

  def apply(c: RouterCtl[Page], r: Resolution[Page]) = component(Props(c, r))

}

开发者ID:workingDog，项目名称:SilverworkReact，代码行数:52，代码来源:LayoutComponent.scala

示例2: CategoryCreatorState

//设置package包名称以及导入依赖的类
package codes.mark.geilematte
package editor

import codes.mark.geilematte.Category
import codes.mark.geilematte.remote.GMClient
import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{Callback, CallbackTo, ReactComponentB, ReactElement, ReactEventI, ReactNode}
import org.scalajs.dom.ext.{Ajax, AjaxException}
import org.scalajs.dom.raw.XMLHttpRequest
import scodec.codecs.implicits._

import scala.concurrent.ExecutionContext.Implicits.global
import scala.util.Success

final case class CategoryCreatorState(inputText:String, result:Option[Int])
object CategoryCreator {
  def component =
    ReactComponentB[Unit]("Category Maker Component")
      .initialState(CategoryCreatorState("", None))
      .renderS( (scope, ccs) => {

        def clicked(e: ReactEventI): Callback = {
          e.preventDefaultCB >>
          scope.modState(_.copy(result = None)) >>
          GMClient.post[Category, Int](Category(ccs.inputText)) logErrors
            ((id:Int) => scope.modState(_.copy(result = Option(id))))
        }

        def changed(e: ReactEventI): Callback = {
          val newInput = e.target.value
          scope.modState(_.copy(inputText = newInput))
        }

        <.span(
          <.span("Enter a new category name"),
          <.input(^.`type` := "text", ^.value := ccs.inputText, ^.onChange ==> changed),
          <.button(^.onClick ==> clicked)("Create"),
          ccs.result.fold(<.div())(res => <.div(res))
        )
      })
      .build
}

开发者ID:i-am-the-slime，项目名称:geilematte，代码行数:43，代码来源:CategoryCreator.scala

示例3: MakerProps

//设置package包名称以及导入依赖的类
package codes.mark.geilematte.editor

import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{Callback, CallbackTo, ReactComponentB, ReactElement, ReactNode}


final case class MakerProps()
object QuestionMaker {
    def component =
      ReactComponentB[MakerProps]("Question Maker Component").render_P {
        case MakerProps() =>
          <.span("category", <.select(
            <.option(^.value := "Sets")
          ))
    }
}

开发者ID:i-am-the-slime，项目名称:geilematte，代码行数:17，代码来源:QuestionMaker.scala

示例4: Matte

//设置package包名称以及导入依赖的类
package codes.mark.geilematte.components

import codes.mark.geilematte.LatexText
import codes.mark.geilematte.facades.SafeKaTex
import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{Callback, ReactComponentB, ReactNode, TopNode}

import scalaz.\/

object Matte {
  def setShit(el:TopNode, ls:LatexText) = {
    Callback {
      SafeKaTex.render(ls.raw, el).fold(
        ())(e => el.innerHTML = e)
    }
  }

  def component =
    ReactComponentB[LatexText]("Math component")
      .initialState(Option.empty[String])
      .render($ => $.state.fold(
        <.span("Replace me, baby")
      )(errStr => <.span(errStr))
      )
      .componentDidMount(cdm => {
        val el = cdm.getDOMNode
        val math = cdm.props
        setShit(el, math)
      })
      .componentDidUpdate(cdu => {
        val el = cdu.$.getDOMNode
        val math = cdu.currentProps
        setShit(el, math)
      })
      .build
}

开发者ID:i-am-the-slime，项目名称:geilematte，代码行数:37，代码来源:Matte.scala

示例5: Dashboard

//设置package包名称以及导入依赖的类
package spatutorial.client.modules

import diode.react._
import diode.data.Pot
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{Loc, TodoLoc}
import spatutorial.client.components._
import spatutorial.client.services.RootModel

object Dashboard {

  case class Props(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]])

  // create dummy data for the chart
  val cp = Chart.ChartProps("Test chart", Chart.BarChart, ChartData(Seq("A", "B", "C"), Seq(ChartDataset(Seq(1, 2, 3), "Data1"))))

  // create the React component for Dashboard
  private val component = ReactComponentB[Props]("Dashboard")
    .render_P { case Props(router, proxy) =>
      <.div(
        // header, MessageOfTheDay and chart components
        <.h2("Dashboard"),
        // use connect from ModelProxy to give Motd only partial view to the model
        proxy.connect(m => m)(Motd(_)),
        Chart(cp),
        // create a link to the To Do view
        <.div(router.link(TodoLoc)("Check your todos!"))
      )
    }.build

  def apply(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]]) = component(Props(router, proxy))
}

开发者ID:mistakenot，项目名称:scalajstemp，代码行数:35，代码来源:Dashboard.scala

示例6: PagesView

//设置package包名称以及导入依赖的类
package org.rebeam.tree.view.pages

import japgolly.scalajs.react.Addons.ReactCssTransitionGroup
import japgolly.scalajs.react.{BackendScope, ReactComponentB, ReactElement}
import japgolly.scalajs.react.extra.Reusability
import japgolly.scalajs.react.vdom.prefix_<^._
import org.rebeam.tree.view.Cursor

object PagesView {

  case class State(direction: PagesTransition)

  val stateReuse: Reusability[State] = Reusability.byRefOr_==

  class Backend[M, P](scope: BackendScope[Cursor[M, Pages[P, P]], State])(renderToList: Cursor[M, Pages[P, P]] => List[ReactElement])(transitions: PagesToTransition[P]) {

    def render(cp: Cursor[M, Pages[P, P]], state: State): ReactElement = {
      val panes = renderToList(cp)
      // We get an unavoidable extra div from the ReactCssTransitionGroup,
      // so we set a class to allow us to style it with flex etc. using CSS
      <.div(^.className := "tree-pages-view__outer-div")(
        ReactCssTransitionGroup(
          "tree-pages-view__page--transition-" + state.direction.className,
          appearTimeout = 550,
          leaveTimeout = 550,
          enterTimeout = 550,
          component = "div")(
          <.div(
            ^.top :="0px",
            ^.left := "0px",
            ^.width := "100%",
            ^.height := "100%",
            ^.position := "absolute",
            ^.key := panes.last.key,
            panes.last
          )
        )
      )
    }
  }

  def apply[M, P](name: String)(renderToList: Cursor[M, Pages[P, P]] => List[ReactElement])(implicit transitions: PagesToTransition[P]) = ReactComponentB[Cursor[M, Pages[P, P]]](name)
    .getInitialState[State](_=> State(PagesTransition.Left))
    .backend(new Backend[M, P](_)(renderToList)(transitions))
    .render(s => s.backend.render(s.props, s.state))
    .componentWillReceiveProps(
      scope => scope.$.setState(State(transitions(scope.currentProps.location.current, scope.nextProps.location.current)))
    )
    .configure(Reusability.shouldComponentUpdate(Cursor.cursorReusability, stateReuse))
    .build
}

开发者ID:trepidacious，项目名称:tree-material-ui，代码行数:52，代码来源:PagesView.scala

示例7: SortableListItem

//设置package包名称以及导入依赖的类
package org.rebeam.tree.view.list

import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{Callback, ReactComponentB, ReactElement}

object SortableListItem {

  case class Props(leftIcon: ReactElement, content: ReactElement, onClick: Callback, onClickContents: Callback)

  val component = ReactComponentB[Props]("SortableListItem")
    .render_P(p => {

      <.div(
        ^.onClick --> p.onClick,
        ^.cursor := "pointer",
        ^.className := "react-sortable-item",
        ^.display := "flex",
        <.div(
          ^.flex := "0 0 56px",
          p.leftIcon
        ),
        <.div(
          ^.onClick --> p.onClickContents,
          ^.flex := "1 1 auto",
          p.content
        ),
        <.div(
          ^.flex := "0 0 56px",
          SortableView.handle
        )
      )

    })
    .build

  def apply(leftIcon: ReactElement, content: ReactElement, onClick: Callback = Callback.empty, onClickContents: Callback = Callback.empty) =
    component(Props(leftIcon, content, onClick, onClickContents))

  def twoLines(line1: String, line2: String) =
    <.div(
      <.span(line1),
      <.br,
      <.span(
        ^.color := "rgba(0, 0, 0, 0.541176)",
        line2
      )
    )
}

开发者ID:trepidacious，项目名称:tree-material-ui，代码行数:49，代码来源:SortableListItem.scala

示例8: ListItemIconButton

//设置package包名称以及导入依赖的类
package org.rebeam.tree.view.list

import chandu0101.scalajs.react.components.materialui.{Mui, MuiIconButton}
import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{Callback, ReactComponentB, ReactElement}
import org.rebeam.tree.view.{RCP, View}

import scala.scalajs.js

object ListItemIconButton {

  case class Props(icon: ReactElement, onClick: Callback)

  private val component = ReactComponentB[Props]("ListItemIconButton")
    .render_P(p =>
      <.div(
        ^.margin := "4px 4px",
        MuiIconButton(
          onTouchTap = View.touch(p.onClick),
          touchRippleColor = Mui.Styles.colors.white,
          touchRippleOpacity = 0.5,
          iconStyle = js.Dynamic.literal("color" -> "#FFF")
        )(p.icon)
      )
    ).build

  def apply(icon: ReactElement, onClick: Callback): RCP[Props] = component(Props(icon, onClick))
}

开发者ID:trepidacious，项目名称:tree-material-ui，代码行数:29，代码来源:ListItemIconButton.scala

示例9: TutorialApp

//设置package包名称以及导入依赖的类
package jp.ne.opt.client

import jp.ne.opt.domain.TodoStore

import scala.scalajs.js.JSApp
import scala.scalajs.js.annotation.JSExport
import japgolly.scalajs.react.{ReactComponentB, ReactDOM}
import japgolly.scalajs.react.vdom.prefix_<^._
import org.scalajs.dom.document

object TutorialApp extends JSApp {
  def main(): Unit = {
    println("helloWorld")
  }

  @JSExport
  def count():Unit = {
    countNumber +=1
    println(countNumber)
  }
  var countNumber: Int = 1

  val Hello =
    ReactComponentB[String]("Hello")
      .render_P(name => <.div(^.id:="hoge","Hello there ", name))
      .build

  ReactDOM.render(Hello("hohohohoho"), document.getElementById("content"))
}

开发者ID:opt-tech，项目名称:scalajs-react-todo，代码行数:30，代码来源:Main.scala

示例10: render

//设置package包名称以及导入依赖的类
package postgresweb.components.base.formBuilder

import japgolly.scalajs.react.{ReactComponentB, BackendScope}
import postgresweb.css.CommonStyles
import japgolly.scalajs.react.vdom.prefix_<^._

import scalacss.Defaults._
import scalacss.ScalaCssReact._



    def render(s:State) = {
      <.div(CommonStyles.fullWidth,
        <.div(Styles.textfield,
          <.input(Styles.input),
          <.label(Styles.label, "Title")
        ),
        <.div(Styles.textfield,
          <.input(Styles.input, ^.`type`:= "number"),
          <.label(Styles.label, "Columns")
        ),
        <.div(Styles.textfield,
          <.input(Styles.input, ^.`type`:= "number"),
          <.label(Styles.label, "Rows")
        )
      )
    }
  }

  val component = ReactComponentB[Unit]("FormBuilderComponent")
    .initialState(State(1,1))
    .renderBackend[Backend]
    .buildU


  def apply() = component()


}

开发者ID:minettiandrea，项目名称:postgres-web，代码行数:40，代码来源:FormBuilderComponent.scala

示例11: App

//设置package包名称以及导入依赖的类
package app

import java.time.LocalDate

import scala.scalajs.js.annotation.JSExport
import org.scalajs.dom
import css.StyleStore.MyStyles
import japgolly.scalajs.react.ReactDOM

import scala.scalajs.js.JSApp
import japgolly.scalajs.react.ReactComponentB
import autowire._

import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue
import scalacss.Defaults._
import scalacss.ScalaCssReact._
import scalacss.internal.mutable.GlobalRegistry


@JSExport
object App extends JSApp {

  private val component = ReactComponentB[Unit]("App")
    .render(_ => AppRouter.component())
    .build

  @JSExport
  def main(): Unit = {
    println("-----> in App ClientUser -------")
    MyStyles.addToDocument()
    GlobalRegistry.addToDocumentOnRegistration()
    ReactDOM.render(component(), dom.document.getElementById("mainRootBody"))
  }

}

开发者ID:workingDog，项目名称:SilverworkReact，代码行数:36，代码来源:App.scala

示例12: App

//设置package包名称以及导入依赖的类
package app

import scala.scalajs.js.annotation.JSExport
import org.scalajs.dom
import japgolly.scalajs.react.ReactDOM
import scala.scalajs.js.JSApp
import japgolly.scalajs.react.ReactComponentB
import css.StyleStore.MyStyles
import scalacss.Defaults._
import scalacss.ScalaCssReact._
import scalacss.internal.mutable.GlobalRegistry


@JSExport
object App extends JSApp {

  private val component = ReactComponentB[Unit]("App")
    .render(_ => AppRouter.component())
    .build

  @JSExport
  def main(): Unit = {
    println("-----> in App AdminUser -------")
    MyStyles.addToDocument()
    GlobalRegistry.addToDocumentOnRegistration()
    ReactDOM.render(component(), dom.document.getElementById("mainRootBody"))
  }

}

开发者ID:workingDog，项目名称:SilverworkReact，代码行数:30，代码来源:App.scala

示例13: App

//设置package包名称以及导入依赖的类
package app

import java.time.LocalDate
import scala.scalajs.js.annotation.JSExport
import org.scalajs.dom
import services.AjaxClient
import shared.services.UserApi
import japgolly.scalajs.react.ReactDOM
import scala.scalajs.js.JSApp
import japgolly.scalajs.react.ReactComponentB
import autowire._
import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue
import scalacss.Defaults._
import scalacss.ScalaCssReact._
import scalacss.internal.mutable.GlobalRegistry


@JSExport
object App extends JSApp {

  private val component = ReactComponentB[Unit]("App")
    .render(_ => AppRouter.component())
    .build

  @JSExport
  def main(): Unit = {
    println("-----> in App BusinessUser -------")
    GlobalRegistry.addToDocumentOnRegistration()
    ReactDOM.render(component(), dom.document.getElementById("mainRootBody"))
  }

}

开发者ID:workingDog，项目名称:SilverworkReact，代码行数:33，代码来源:App.scala

示例14: HomeScreen

//设置package包名称以及导入依赖的类
package screens

import app.AppRouter._
import japgolly.scalajs.react.extra.router.RouterCtl
import chandu0101.scalajs.react.components.materialui.{ MuiMuiThemeProvider, MuiRaisedButton, MuiToolbar, MuiToolbarGroup, MuiToolbarSeparator, MuiToolbarTitle }
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react._

import scala.language.existentials
import scala.language.postfixOps


object HomeScreen {

  case class Props(page: RouterCtl[Page])

  case class State(selectedDays: List[String])

  case class Backend(scope: BackendScope[Props, State]) {

    def changeTo(page: Page, props: Props)(e: ReactEventH) = {
      props.page.set(page)
    }

    def render(props: Props, state: State) = MuiMuiThemeProvider()(
      MuiToolbar()(
        MuiToolbarGroup()(
          MuiRaisedButton(onClick = changeTo(NewJobPage, props) _, label = "??? ???", primary = true)(),
          MuiRaisedButton(onClick = changeTo(DeleteJobPage, props) _, label = "?? ??", primary = true)(),
          MuiRaisedButton(onClick = changeTo(UpdateJobPage, props) _, label = "?? ??", primary = true)()
        )
      )
    )

  }

  val component = ReactComponentB[Props]("HomeScreen")
    .initialState(State(List.empty))
    .renderBackend[Backend]
    .build

  def apply(c: RouterCtl[Page]) = component(Props(c))
}

开发者ID:workingDog，项目名称:SilverworkReact，代码行数:44，代码来源:HomeScreen.scala

示例15: propOne

//设置package包名称以及导入依赖的类
package spatutorial.client.components

import japgolly.scalajs.react.vdom.prefix_<^.<
import japgolly.scalajs.react.{BackendScope, Callback, JsComponentM, JsComponentType, JsComponentU, ReactComponentB, ReactComponentU_, ReactNode}
import org.scalajs.dom.raw.HTMLElement

import scala.scalajs.js
import scala.scalajs.js._
import scala.scalajs.js.annotation.JSName

@js.native
trait SampleReactComponentProps extends js.Object {
  def propOne: String = js.native
  def propRwo: String = js.native
}

@js.native
@JSName("SampleReactComponent")
class SampleReactComponent(props: SampleReactComponentProps) extends JsComponentU[SampleReactComponentProps, js.Object, HTMLElement]

object SampleReactComponentProps {
  def apply(propOne: String,
            propTwo: String): SampleReactComponentProps = {
    js.Dynamic.literal(
      propOne = propOne,
      propYwo = propTwo
    ).asInstanceOf[SampleReactComponentProps]
  }
}

object SampleReactComponent {

  //  ,^.style("width: 500; height: 500")
  val component = ReactComponentB[SampleReactComponentProps]("SampleReactComponent")
    .render_P(p => new SampleReactComponent(p))
    .build

  //  val component = ReactComponentB[AceProps]("AceEditor")
  //    //.render(p => new AceEditor(p))
  //    .render_P(p => new AceEditor(p))
  //    .build

  def apply(props: SampleReactComponentProps, children: ReactNode*) = component(props, children: _*)

  def apply() = component

}

开发者ID:wrotki，项目名称:spacommander，代码行数:48，代码来源:SampleReactComponent.scala

示例16: NotFoundPage

//设置package包名称以及导入依赖的类
package net.scalytica.blaargh.pages

import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.vdom.prefix_<^._
import net.scalytica.blaargh.styles.BlaarghBootstrapCSS

import scalacss.ScalaCssReact._

object NotFoundPage {

  val component = ReactComponentB[Unit]("NotFoundPage")
    .stateless
    .render { _ =>
      val binaryPageNotFound = Seq(
        "01110000", "01100001", "01100111", "01100101", "00100000", "01101110", "01101111",
        "01110100", "00100000", "01100110", "01101111", "01110101", "01101110", "01100100"
      )
      <.div(BlaarghBootstrapCSS.container.compose(BlaarghBootstrapCSS.textXsCenter),
        binaryPageNotFound.grouped(7).zipWithIndex.map(grp =>
          <.h2(^.key := s"${grp._2}_notfound",
            grp._1.map(bin =>
              <.span(^.marginRight := "1.2rem", bin)
            )
          )
        )
      )
    }
    .build

  def apply() = component()
}

开发者ID:kpmeen，项目名称:blaargh，代码行数:32，代码来源:NotFoundPage.scala

示例17: Dashboard

//设置package包名称以及导入依赖的类
package spatutorial.client.modules

import diode.react._
import diode.data.Pot
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{Loc, TodoLoc}
import spatutorial.client.components._

object Dashboard {

  case class Props(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]])

  // create dummy data for the chart
  val cp = Chart.ChartProps("Test chart", Chart.BarChart, ChartData(Seq("A", "B", "C"), Seq(ChartDataset(Seq(1, 2, 3), "Data1"))))

  // create the React component for Dashboard
  private val component = ReactComponentB[Props]("Dashboard")
    .render_P { case Props(router, proxy) =>

      val motdConnect = proxy.connect(m => m)
      <.div(
        // header, MessageOfTheDay and chart components
        <.h2("Dashboard"),
        // use connect from ModelProxy to give Motd only partial view to the model
        motdConnect(Motd(_)),
        Chart(cp),
        // create a link to the To Do view
        <.div(router.link(TodoLoc)("Check your todos!"))
      )
    }.build

  def apply(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]]) = component(Props(router, proxy))
}

开发者ID:simerplaha，项目名称:scalajs-spa-tutorial-spray，代码行数:36，代码来源:Dashboard.scala

示例18: Dashboard

//设置package包名称以及导入依赖的类
package spatutorial.client.modules

import diode.data.Pot
import diode.react._
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{Loc, TodoLoc}
import spatutorial.client.components._

import scala.util.Random

object Dashboard {

  case class Props(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]])

  // create dummy data for the chart
  val cp = Chart.ChartProps(
    "Test chart",
    Chart.BarChart,
    ChartData(
      Random.alphanumeric.map(_.toUpper.toString).distinct.take(10),
      Seq(ChartDataset(Iterator.continually(Random.nextDouble() * 10).take(10).toSeq, "Data1"))
    )
  )

  // create the React component for Dashboard
  private val component = ReactComponentB[Props]("Dashboard")
    .render_P { case Props(router, proxy) =>
      <.div(
        // header, MessageOfTheDay and chart components
        <.h2("Dashboard"),
        // use connect from ModelProxy to give Motd only partial view to the model
        proxy.connect(m => m)(Motd(_)),
        Chart(cp),
        // create a link to the To Do view
        <.div(router.link(TodoLoc)("Check your todos!"))
      )
    }.build

  def apply(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]]) = component(Props(router, proxy))
}

开发者ID:adrijardi，项目名称:playing-scalajs，代码行数:43，代码来源:Dashboard.scala

示例19: Tell

//设置package包名称以及导入依赖的类
package spatutorial.client.modules

import diode.data.Pot
import diode.react.ModelProxy
import japgolly.scalajs.react.{BackendScope, Callback, ReactComponentB}
import spatutorial.client.components.Bootstrap.Panel
import spatutorial.shared.TellItem
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.components.GlobalStyles

import scalacss.ScalaCssReact._


object Tell {

  @inline private def bss = GlobalStyles.bootstrapStyles

  case class Props(proxy: ModelProxy[Pot[TellItem]])

  case class State(selectedItem: Option[TellItem] = None)

  class Backend(t: BackendScope[Props, State]) {
    def sayIt(): Callback = {
      println("it")
      t.modState(s => s.copy(selectedItem = Some(TellItem("It!!"))))
      t.
    }

    def render(p: Props, s: State) =
      Panel(Panel.Props("What do you want to say?"),
        <.div(bss.formGroup,
          <.label(^.`for` := "tellText", "I want to tell you:"),
          <.input(^.id := "tellText", ^.name := "tellText"),
          <.button(^.onClick --> sayIt, "Say it!")
        )
      )
  }

  val component = ReactComponentB[Props]("Tell")
    .initialState(State())
    .renderBackend[Backend]
    .build

  def apply(proxy: ModelProxy[Pot[TellItem]]) = component(Props(proxy))
}

开发者ID:adrijardi，项目名称:playing-scalajs，代码行数:46，代码来源:Tell.scala

示例20: TodoFormComponent

//设置package包名称以及导入依赖的类
package scalajsreact.template.components

import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{ReactComponentB, _}

object TodoFormComponent {
  case class Props(handleSubmit: ReactEventI => Callback, onChange: ReactEventI => Callback, text: String, nextId: Int)

  val component = ReactComponentB[Props]("TodoForm")
    .render_P ( p => {
      <.form(^.onSubmit ==> p.handleSubmit,
        <.input(^.onChange ==> p.onChange, ^.value := p.text),
        <.button("Add ", if (p.nextId == 0) "first" else "#" + p.nextId)
      )
    })
    .build

  def apply(p: Props) = component(p)
}

开发者ID:jarlah，项目名称:scalajs-react-todoapp，代码行数:20，代码来源:TodoFormComponent.scala

注：本文中的japgolly.scalajs.react.ReactComponentB类示例整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。