如何使用指定的值在React組件中包含文本輸入？

我需要在一個陣營組成的文本輸入，從組件的道具通過其初始值：如何使用指定的值在React組件中包含文本輸入？

<input value={this.props.value} type='text'/>

但輸入不可編輯，並作出反應抱怨：

Warning: Failed form propType: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field.

所以我添加一個onChange事件處理函數：

<input value={this.props.value} type='text' onChange={this.valueChanged} />

我應該在valueChanged處理程序中做什麼來更新輸入值？我必須使用狀態嗎？

來源

2016-11-17 NeoWang

是的，你將不得不使用狀態...... – Li357

查看窗體上的文檔，特別是controlled components。

你valueChanged()方法，其中改變事件的處理，會做這樣的事情：

valueChanged(event) { 
    this.setState({ 
    value: event.target.value //set this.state.value to the input's value 
    }); 
}

這意味着，是的，你的輸入值，就需要使用狀態。如果你想this.state.value到（this.state.value。）從this.props.value填充，你可以做這樣的事情在構造函數中：

constructor(props) { 
    super(props); 
    this.state = { 
    value: props.value //passed prop as initial value 
    } 
    this.valueChanged = this.valueChanged.bind(this); 
}

以上，要初步建立this.state.value到通過道具value的價值。然後，從狀態值和onChange處理程序適用於您的<input>：

<input value={this.state.value} type="text" onChange={this.valueChanged} />

由於this.state.value是當前輸入值，每一個值發生變化時進行更新，如預期成爲輸入能。

這裏有一個小提琴（感謝，安德魯）：http://jsfiddle.net/ow99x7d5/2

來源

2016-11-17 01:47:24

既然你打我），如果你需要一個現場演示，這裏的東西我放在一起：HTTP： //jsfiddle.net/ow99x7d5/ – Li357

@AndrewLi感謝您的編輯。我修改了代碼來移除'（event）=> this.valueChanged（event）'，因爲它可以簡單地通過在構造函數中綁定this.valueChanged來解決。感覺有點更習慣。 –

謝謝，非常有幫助。我想知道是否有沒有使用狀態的方式，如使用setProps（不推薦）。 – NeoWang

如何使用指定的值在React組件中包含文本輸入？

回答

相關問題