反应简单状态管理

Question

我有一个简单的组件，状态很小。我想要一个按钮点击，以改变状态为其他东西。现在，我看到了一个意想不到的标记错误，并且不太明白为什么。

以下是代码：

// Component to practice simple state mgmt
import React from 'react'

class Stateful extends React.Component{
  state = {
    flag: true,
    text: "I am simple text"
  }
  render() {
    return(
      <div>
        <h2>Small State example</h2>
        <p>{this.state.text}</p>
        <button onClick={
          this.setState(
            prevState=>({
              flag: !prevState.flag,
              text: prevState.text.toUpperCase()
            })
      }>Click to change state</button>
      </div>
    )
  }
}

export default Stateful

Answer 1

您在您的)函数中缺少了一个onClick，并且没有正确地使用它。您需要使用一个函数并为onclick事件调用它，如下面的() => ...

 render() {
    return (
      <div>
        <h2>Small State example</h2>
        <p>{this.state.text}</p>
        <button onClick={ () =>
          this.setState(
            prevState=>({
              flag: !prevState.flag,
              text: prevState.text.toUpperCase()
            }))
      }>Click to change state</button>
      </div>
    )
  }

与单独的函数相比，我更喜欢提取onClick处理程序。这样我们的渲染方法就会更干净。

handleClick = () =>
    this.setState(
      prevState => ({
        flag: !prevState.flag,
        text: prevState.text.toUpperCase()
      }))

 render() {
    return (
      <div>
        <h2>Small State example</h2>
        <p>{this.state.text}</p>
        <button onClick={this.handleClick}>Click to change state</button>
      </div>
    )
  }

Answer 2

您没有为单击事件分配处理程序。您直接调用setState，这是不好的，因为您处于render方法中，状态更改会导致重呈现，从而有效地创建无限循环。

您还缺少了一个)

所以用吧

<button onClick={()=>
      this.setState(
        prevState=>({
          flag: !prevState.flag,
          text: prevState.text.toUpperCase()
        }))
  }>Click to change state</button>

https://codesandbox.io/s/j2x9jm38y5的工作演示