文档 / rescript-react / useState Hook
Edit

useState

React.useState 返回一个有状态的值，和一个更新它的函数。

用法

ReScriptJS Output
let (state, setState) = React.useState(_ => initialState)

初次渲染时，返回的 state 和作为第一个参数传给 React.useState 的 initialState 一样。

setState 函数也可以传给其他组件，可以用于通过子组件设置父组件的 state。

示例

为 Text Input 添加 State

RES
@react.component
let make = () => {
  let (text, setText) = React.useState(_ => "");

  let onChange = evt => {
    ReactEvent.Form.preventDefault(evt)
    let value = ReactEvent.Form.target(evt)["value"]
    setText(_prev => value);
  }

  <div>
    <input onChange value=text />
  </div>
};

将 setState 传给子组件

下面的例子中， ThemeContainer 组件用于管理 darkmode state，并将 setDarkmode 函数传给 ControlPanel 组件来触发 state 变更。

ReScriptJS Output
// ThemeContainer.res
module ControlPanel = {
  @react.component
  let make = (~setDarkmode, ~darkmode) => {
    let onClick = evt => {
      ReactEvent.Mouse.preventDefault(evt)
      setDarkmode(prev => !prev)
    }

    let toggleText = "Switch to " ++ ((darkmode ? "light" : "dark") ++ " theme")

    <div> <button onClick> {React.string(toggleText)} </button> </div>
  }
}

@react.component
let make = (~content) => {
  let (darkmode, setDarkmode) = React.useState(_ => false)

  let className = darkmode ? "theme-dark" : "theme-light"

  <div className>
    <section>
      <h1> {React.string("More Infos about ReScript")} </h1> content
    </section>
    <ControlPanel darkmode setDarkmode />
  </div>
}

当 setDarkmode 返回一个新值时（例如 true 切换到 false），ThemeContainer 的 className 将会进行重渲染，嵌套的 ControlPanel 组件的切换文本也会改变。

Uncurried 版本

为了更干净的 JS 输出，可以使用 React.Uncurried.useState：

ReScriptJS Output
let (state, setState) = React.Uncurried.useState(_ => 0)

setState(. prev => prev + 1)