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在輸入字段不工作

回答

相關問題