React - 輸入字段上的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);

Answer 2

存儲更改的值， setState()是異步的。

handleInputChange(event) {
  const myValue = event.target.value;
  this.setState({
    text: myValue
  })
}

Answer 3

你為什么在setState中有'new state：'？ 每次按鍵或更改時都會調用onChange函數，因此不應在setState函數內添加自己的文本。 如果您想使用ES6，可以將onChange調用更改為：

(event) => this.handleInputChange(event.target.value)

和handleInput函數：

handleInputChange(value) {
  this.setState({
    text: value
  })
}

如果在輸入文本之前需要'new state：'字符串，則將其放在輸入之前的span中。