React _ 表单

表单

React的本质是将JavaScript的数据层与HTML的视图层进行高度绑定，当视图层的数据更新，与其绑定的JavaScript数据层即会立刻收到反馈。因此，对于React来说，不是通过JavaScript去获取指定表单元素的值，而是直接从指定React表单元素的state属性中获取即可。同样，想要对视图层去更新，不是通过JavaScript去直接选择元素来更新，而是通过在数据层，对相关state属性进行更新，从而视图层自动实现相应渲染；不过要注意，别直接修改state属性，而是要用setState()方法去更新数据层。

从state属性中拿数据

如上所述，在React中获取表单数据，不是用JavaScript直接去拿，而是从React表单元素的state状态属性中去获取。具体代码如下所示：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

运行一下

从数据层对视图层进行更新

在上述示例中，每次表单数据变化都会有一个相应的事件回调函数，在这个函数中，若想对视图层进行更新，则需要使用setState()方法，而不是直接修改state状态；如下所示，通过内置的toUpperCase()方法将用户的每次输入都自动转换为大写：

handleChange(event) {
  this.setState({value: event.target.value.toUpperCase()});
}

运行一下

textarea 元素

React中，textarea文本框元素的内容，由value属性决定；下例中，在初始化构造器中，对value进行了默认值设置，因此文本框会存在默认初值。

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '请撰写一篇关于反清复明的文章……'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('提交的文章: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          文章:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

ReactDOM.render(
  <EssayForm />,
  document.getElementById('root')
);

运行一下

select 元素

在传统HTML中实现下拉列表select元素，如下所示：

<select>
  <option value="grapefruit">葡萄柚</option>
  <option value="lime">柠檬</option>
  <option selected value="coconut">椰子</option>
  <option value="mango">芒果</option>
</select>

而React中的select元素若想设置选中了某个选项，则是基于select元素的value属性，而不需要在option元素上设置selected属性。

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('你喜欢的风味是: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          选择你喜欢的风味:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">葡萄柚</option>
            <option value="lime">柠檬</option>
            <option value="coconut">椰子</option>
            <option value="mango">芒果</option>
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

ReactDOM.render(
  <FlavorForm />,
  document.getElementById('root')
);

运行一下

表单

推广