React 表单

定义和使用

就像 HTML 一样，React 可以使用表单来允许用户与网页进行交互。

您可以像其他元素一样使用 React 添加一个表单。

添加一个允许用户输入其名称的表单：

class MyForm extends React.Component {
  render() {
    return (
      <form>
        <h1>Hello</h1>
        <p>请输入你的名字：</p>
        <input
          type="text"
        />
      </form>
    );
  }
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

尝试一下

处理表单

处理表单是关于数据更改值或提交时如何处理数据。

在 HTML 中，表单数据通常由 DOM 处理。

在 React 中，表单数据通常由组件处理。

当数据由组件处理时，所有数据都以组件状态存储。

您可以通过在 onChange 属性中添加事件处理程序来控制更改。

在 onChange 属性中添加事件处理程序，并让事件处理程序更新状态对象：

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    return (
      <form>
        <h1>Hello {this.state.username}</h1>
        <p>请输入你的名字：</p>
        <input
          type='text'
          onChange={this.myChangeHandler}
        />
      </form>
    );
  }
}

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

尝试一下

注意：必须先在构造函数方法中初始化状态，然后才能使用它。

注意：您可以使用 event.target.value 语法访问字段值。

有条件的渲染

如果不想在用户完成任何输入之前显示 h1 元素，则可以添加 if 语句。

查看下面的示例，并注意以下几点：

1.我们创建一个空变量，在本示例中，我们将其称为 header。

2.如果用户进行了任何输入，我们添加一条 if 语句以将内容插入到 header 变量中。

3.我们使用花括号将标题变量插入输出中。

仅在定义了用户名的情况下显示标题：

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    let header = '';
    if (this.state.username) {
      header = <h1>Hello {this.state.username}</h1>;
    } else {
      header = '';
    }
    return (
      <form>
        <h1>Hello {this.state.username}</h1>
        <p>请输入你的名字：</p>
        <input
            type='text'
            onChange={this.myChangeHandler}
        />
      </form>
    );
  }
}

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

尝试一下

提交表单

您可以通过在 onSubmit 属性中添加事件处理程序来控制 Submit 操作。

在 onSubmit 属性中添加一个提交按钮和一个事件处理程序：

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  mySubmitHandler = (event) => {
    event.preventDefault();
    alert("您正在提交 " + this.state.username);
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    let header = '';
    if (this.state.username) {
      header = <h1>Hello {this.state.username}</h1>;
    } else {
      header = '';
    }
    return (
      <form onSubmit={this.mySubmitHandler}>
        <h1>Hello {this.state.username}</h1>
        <p>请输入您的姓名，然后提交：</p>
        <input
            type='text'
            onChange={this.myChangeHandler}
        />
        <input type='submit' value="提交" />
      </form>
    );
  }
}

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

尝试一下

请注意，我们使用 event.preventDefault() 来防止实际提交表单。

多个输入字段

您可以通过向每个元素添加名称属性来控制多个输入字段的值。

在构造函数中初始化状态时，请使用字段名称。

要访问事件处理程序中的字段，请使用 event.target.name 和 event.target.value 语法。

要在 this.setState 方法中更新状态，请在属性名称周围使用方括号 [bracket notation]。

用两个输入字段编写一个表单：

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      age: null,
    };
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
  }
  render() {
    return (
      <form>
        <h1>Hello {this.state.username} {this.state.age}</h1>
        <p>请输入您的姓名：</p>
        <input
              type='text'
              name='username'
              onChange={this.myChangeHandler}
        />
        <p>请输入您的年龄：</p>
        <input
              type='text'
              name='age'
              onChange={this.myChangeHandler}
        />
      </form>
    );
  }
}

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

尝试一下

注意，我们为两个输入字段使用了相同的事件处理函数，我们可以为每个输入字段编写一个事件处理函数，但这为我们提供了更简洁的代码，这是 React 中的首选方式。

验证表单输入

您可以在用户输入时验证表单输入，也可以等到表单提交后再进行验证。

填写年龄时，如果“年龄”字段不是数字，则会收到警报：

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      age: null,
    };
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    if (nam === "age") {
      if (!Number(val)) {
        alert("您的年龄必须是数字");
      }
    }
    this.setState({[nam]: val});
  }
  render() {
    return (
      <form>
        <h1>Hello {this.state.username} {this.state.age}</h1>
        <p>请输入您的姓名：</p>
        <input
              type='text'
              name='username'
              onChange={this.myChangeHandler}
        />
        <p>请输入您的年龄：</p>
        <input
              type='text'
              name='age'
              onChange={this.myChangeHandler}
        />
      </form>
    );
  }
}

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

尝试一下

在下面，您将看到与上面相同的示例，但是验证是在提交表单时而不是在字段中编写时完成的。

相同的示例，但在表单提交时进行了验证：

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      age: null,
    };
  }
  mySubmitHandler = (event) => {
    event.preventDefault();
    let age = this.state.age;
    if (!Number(age)) {
      alert("您的年龄必须是数字");
    }
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
  }
  render() {
    return (
      <form onSubmit={this.mySubmitHandler}>
        <h1>Hello {this.state.username} {this.state.age}</h1>
        <p>请输入您的姓名：</p>
        <input
              type='text'
              name='username'
              onChange={this.myChangeHandler}
        />
        <p>请输入您的年龄：</p>
        <input
              type='text'
              name='age'
              onChange={this.myChangeHandler}
        />
        <br/>
        <br/>
        <input type='submit' value="提交" />
      </form>
    );
  }
}

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

尝试一下

添加错误信息

警报框中的错误消息可能会令人讨厌，因此让我们创建一条默认为空的错误消息，但当用户输入无效内容时显示错误消息：

当您填写年龄而不是数字时，将显示错误消息：

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      age: null,
      errormessage: ''
    };
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    let err = '';
    if (nam === "age") {
      if (val !="" && !Number(val)) {
        err = <strong>您的年龄必须是数字</strong>;
      }
    }
    this.setState({errormessage: err});
    this.setState({[nam]: val});
  }
  render() {
    return (
      <form>
        <h1>Hello {this.state.username} {this.state.age}</h1>
        <p>请输入您的姓名：</p>
        <input
              type='text'
              name='username'
              onChange={this.myChangeHandler}
        />
        <p>请输入您的年龄：</p>
        <input
              type='text'
              name='age'
              onChange={this.myChangeHandler}
        />
        {this.state.errormessage}
      </form>
    );
  }
}

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

尝试一下

文本框

React 中的 textarea 元素与普通 HTML 稍有不同。

在 HTML 中，textarea 的值是开始标记 <textarea> 和结束标记 </textarea> 之间的文本，在 React textarea 的值放置在 value 属性中。

一个简单的文本区域，在构造函数中初始化了一些内容：

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      description: 'textarea的内容在value属性中'
    };
  }
  render() {
    return (
      <form>
        <textarea value={this.state.description} />
      </form>
    );
  }
}

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

尝试一下

选择框

React 中的下拉列表或选择框也与 HTML 有所不同。

在 HTML 中，下拉列表中的选定值是使用 selected 属性定义的：

<select>
  <option value="Ford">Ford</option>
  <option value="Volvo" selected>Volvo</option>
  <option value="Fiat">Fiat</option>
</select>

在 React 中，所选值是通过 selected 标签上的 value 属性定义的。

一个简单的选择框，其中在构造函数中初始化了所选值 “Volvo”：

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mycar: 'Volvo'
    };
  }
  render() {
    return (
      <form>
        <select value={this.state.mycar}>
          <option value="Ford">Ford</option>
          <option value="Volvo" selected>Volvo</option>
          <option value="Fiat">Fiat</option>
        </select>
      </form>
    );
  }
}

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

尝试一下

定义和使用

处理表单

有条件的渲染

提交表单

多个输入字段

验证表单输入

添加错误信息

文本框

选择框

相关页面