React input标签的defaultValue的问题

#1

React input标签的defaultValue的值不会更新defaultValue={productName} value={productName}
这两个标签测试不一样,value不能改变input的值,但是随着绑定的值变化而变化,而defaultValue输入框的值虽然会变,但是绑定的值变了,显示的值不变化

#3

你的input上没有绑定onChange事件的吗。。。

#4

defaultValue 本来就不会根据你 store 里面值的更新而更新,所以如果需要更新建议采用 value。

另外,建议使用 redux-form 去处理表单,redux-form 里面自带一个 initialValues 解决这个问题。

#5

我们没有用redux

#6

我现在是要把input的值可以在输入框中改变,又可以随着绑定的值改变而改变

#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}
      />
    );
  }
#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>
#9

我们大多时候一般用 ref 来改变里的值。

#10

你们说的都很对,所以这个组件我们要封装一下,使defaultValue成为value的初始值,而不是react的那样

#11

为什么要用defaultValue呢?
根据官方的定义:
如果input 使用了defaultValue,呢么这个input就是不可控组件。
如果input 使用value,呢这个input就是可控组件,而且必须绑定onChange 方法。
这里你可以使用value + onChange的方式

<input value={state.value} onChange={(e) => this.setState({ value: e.target.value }) } />