反应 - 输入字段上的 setState 不起作用

Question

我似乎遗漏了一些东西，为什么 setState 对我不起作用？！如果我将初始状态拉入文本输入字段的值以使其受控，则 setState 对我不起作用......我做错了什么？

      class Module extends Component {
          constructor() {
              super()

              this.state = {
                  text: 'text'
              }

              this.handleInputChange = this.handleInputChange.bind(this)
          }

          handleInputChange(event) {
              console.log('handle input change')
              this.setState = ({
                  text: 'new state: ' + event.target.value
              })
              console.log(event.target.value)
          }

          render() {
              return (
                  <div>
                      <input
                          type="text"
                          value={ this.state.text }
                          onChange={ this.handleInputChange }
                      />
                  </div>
              )
          }
      }

      export default Module

Answer 1

因为setState是异步的。但幸运的是，方法调用中有一个回调参数，您可以使用它来获取这样的值

    this.setState({
        text: 'new state: ' + event.target.value
    }, () => {
        console.log(text)
    })

顺便说一句，您没有为setState它分配任何内容，这是一个方法调用。除此之外，由于events是 React 中的合成事件，您必须将当前目标存储在一个变量中，以免丢失事件，例如像这样

    const saveValue = event.target.value;
    this.setState({
        text: 'new state: ' + saveValue 
    });
    console.log(saveValue);