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

为什么你有新的状态：＆＃39;在setState？每次按键或更改时都会调用onChange函数，因此您不应在setState函数内添加自己的文本。如果您想使用ES6，可以将onChange调用更改为：

00-0000_Last-First_fbn1_20xcoverage.txt
01-0101_Last-First_fbn1_20xcoverage.txt
02-0202_Last-First_fbn1_20xcoverage.txt

和handleInput函数：

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

如果您需要新状态：＆＃39;输入文本之前的字符串然后将其放在输入之前的范围内。

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

3 个答案: