React - setState在输入字段不工作

我似乎错过了一些东西，为什么setState不适合我？！如果我将初始状态拖入文本输入字段的值以使其受控，setState不适用于我...我做错了什么？React - 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

来源

2017-03-27 Majki

这只是一个错字。 'this.setState =（{'应该是函数调用不分配'this.setState（{' –

很棒！谢谢你sooo！以为我要疯了...休息的时间我猜 – Majki

因为setState是异步的。幸好有在其中您可以用它来得到这样

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

顺便说一句，你不指定任何东西setState这是一个方法调用中的值的方法调用回调参数。此外，由于events是合成的事件做出反应，你必须在当前的目标存储在一个变量，例如不丢失的情况下这样

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

来源

2017-03-27 12:51:16

这个问题没有任何做与'setState'本身的异步性质.OP不手动读状态。 –

@YuryTarabanko是的，我意识到这一点。这就是为什么有第二部分的答案。 –

-1

为什么你有“新的状态：”中的setState？ onChange函数在每次按键或更改时调用，因此不应在setState函数内添加自己的文本。如果你想使用ES6，你可以改变的onChange呼吁：

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

和handleInput功能：

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

如果你需要“新的状态：”字符串输入文本之前，然后放它在输入之前的范围内。

来源

2017-03-27 13:05:27 NIRudman

此答案不解决原始问题，并包含相同错字。 –

存储更改的值，setState()是异步的。

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

来源

2017-12-14 04:15:25

React - setState在输入字段不工作

回答

相关问题