React input标签的defaultValue的值不会更新defaultValue={productName} value={productName}
这两个标签测试不一样,value不能改变input的值,但是随着绑定的值变化而变化,而defaultValue输入框的值虽然会变,但是绑定的值变了,显示的值不变化
React input标签的defaultValue的问题
fengyua51
#1
aisensiy
#4
defaultValue 本来就不会根据你 store 里面值的更新而更新,所以如果需要更新建议采用 value。
另外,建议使用 redux-form
去处理表单,redux-form
里面自带一个 initialValues
解决这个问题。
codelegant
#7
官方示例:https://facebook.github.io/react/docs/forms.html#controlled-components
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return (
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
);
}
JohannLai
#8
defaultValue
只在初始加载的时候起作用,只有,defaultValue
将不会更新,因为它的用法是设置初始默认值,如果有需要更新可以使用value
例子如下
var Field = React.createClass({
//transfer props to state on load
getInitialState: function () {
return {value: this.props.value};
},
//if the parent component updates the prop, force re-render
componentWillReceiveProps: function(nextProps) {
this.setState({value: nextProps.value});
},
//re-render when input changes
_handleChange: function (e){
this.setState({value: e.target.value});
},
render: function () {
// render based on state
return (
<div>
<input type="text" onChange={this._handleChange}
value={this.state.value || ''} />
</div>
);
}
});
-----------------------------分割线--------------------------------------------------------------
当然也可以通过设置一个key
解决这个问题,一个好的key
就相当于数据库的id一样,给表单类型的组件一个特殊的值
<div key={this.props.value}>
<input type="text" defaultValue={this.props.value || ''} />
</div>
arthurzoubin
#11
为什么要用defaultValue呢?
根据官方的定义:
如果input 使用了defaultValue,呢么这个input就是不可控组件。
如果input 使用value,呢这个input就是可控组件,而且必须绑定onChange 方法。
这里你可以使用value + onChange的方式
<input value={state.value} onChange={(e) => this.setState({ value: e.target.value }) } />