• 用户在表单填入的内容,属于用户跟组件的互动,所以不能用 this.props
var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

ReactDOM.render(<Input/>, document.body);

上面代码中,文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况

# refs

文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

var formData = {
  input: this.refs.goodInput.value,
  select: this.refs.goodSelect.value,
  textareaValue: this.refs.goodTextarea.value,
  radio: this.state.radioValue,
  check: this.state.checkValues,
};
……

<input ref="goodInput" type="text" defaultValut={this.state.inputValue}/>
Last Updated: 5/14/2022, 11:38:45 AM