反應 - this.input.value與處理變化

我有一個有10個輸入的表單。

我應該使用this.input.value還是處理更改並將其存儲在state？

handleChange(e) { 
    this.setState({input: e.target.value}); 
} 
... 
<input type="text" value={this.state.input} onChange={this.handleChange} />

或

onSubmit() { 
    const inputValue = this.input.value; 
    ... 
} 
... 
<input type="text" ref={(input) => {this.input = input;}} />

從文檔：

何時使用參考文獻

There are a few good use cases for refs: 

    Managing focus, text selection, or media playback. 
    Triggering imperative animations. 
    Integrating with third-party DOM libraries. 

Avoid using refs for anything that can be done declaratively.

來源

2017-10-04 Nick

首先，'this.input.value'不起作用。你需要使用'this.refs'來引用輸入框。我會使用狀態來避免複雜性 –

這取決於您想要實現的內容：是否存在應該按照每個輸入進行的操作，或者只有在提交所有值後才執行表單提交？ –

@TravelingTechGuy，第二個。 – Nick

設置控制的輸入是一種痛苦，但我使用這種模式t o讓它更容易一點。

所有輸入端創建一個onChange事件處理程序：

handleInputChange(e){ 
    const target = e.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    const name = target.name; 
    this.setState({ 
     [name]: value 
    }); 
}

然後，你的投入，一定要給它在你的狀態更新鍵匹配的name。

render() { 
    const { firstName, lastName, email, acceptTerms } = this.state; 
    return (
     <form> 
      <input name="firstName" onChange={this.handleInputChange} value={firstName} /> 
      <input name="lastName" onChange={this.handleInputChange} value={lastName} /> 
      <input name="email" onChange={this.handleInputChange} value={email} /> 
      <input type="checkbox" name="acceptTerms" onChange={this.handleInputChange} checked={acceptTerms} /> 
     </form> 
    ) 
}

來源

2017-10-04 19:27:22

看起來不錯。我想你可以在文件中重複使用這個功能。 – nicooga

是的，我一直在考慮把它轉換成HOC。還沒有太多的嘗試。 –

是的，看起來不錯。在我真正的項目中，我做了'onChange = {this.handleInputChange.bind（null，'name'）}'和'handleInputChange（inputName，e）{this.setState（{[inputName]：e.target.value}）} '。你的代碼看起來更好。但是我在例子中看到很多'this.input.value'，並想知道我是否可以使用它。 – Nick

反應 - this.input.value與處理變化

回答

相關問題