Form

在处理表单数据的时候,我们全部当做受控组件处理,将数据将放到state中。

如果配合redux,可以直接交给redux来管理。

禁止使用refs或者操作dom的方式获取表单数据。

示例:

import React from 'react';
import './Form.css';

export default class extends React.PureComponent {

  constructor(props) {
    super(props);
    this.state = { form: {} };
  }

  changeForm(name, value) {
    this.setState({ form: { ...this.state.form, [name]: value } });
  }

  render() {
    const { form } = this.state;
    return (
      <React.Fragment>
        <div>
          <label>用户名:</label>
          <input name="username" value={form.username} onChange={e => this.changeForm('username', e.target.value)} />
        </div>
        <div>
          <label>邮箱:</label>
          <input name="email" value={form.email} onChange={e => this.changeForm('email', e.target.value)} />
        </div>
        <div>
          <label>电话:</label>
          <input name="tel" value={form.tel} onChange={e => this.changeForm('tel', e.target.value)} />
        </div>
        <div>
          <label></label>
          <button onClick={() => { alert(JSON.stringify(form)) }}>提交</button>
        </div>
      </React.Fragment>
    );
  }
}

在线示例

results matching ""

    No results matching ""