React 中如何处理表单元素？-ReactJS面试指南

当前位置:　首页>> 技术小册>> ReactJS面试指南

答案：React 中处理表单元素有两种方式：受控组件和非受控组件。

受控组件是指表单元素的值受 React 组件状态（state）控制，每当用户输入数据时，React 会更新组件状态并重新渲染组件。使用受控组件可以方便地对表单数据进行处理和验证，例如：

```asp

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '', password: '' };
  }
  handleSubmit(event) {
    console.log(`Username: ${this.state.username}, Password: ${this.state.password}`);
    event.preventDefault();
  }
  handleUsernameChange(event) {
    this.setState({ username: event.target.value });
  }
  handlePasswordChange(event) {
    this.setState({ password: event.target.value });
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Username:
          <input type="text" value={this.state.username} onChange={this.handleUsernameChange} />
        </label>
        <br />
        <label>
          Password:
          <input type="password" value={this.state.password} onChange={this.handlePasswordChange} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}
```
非受控组件则是指表单元素的值不受 React 组件状态控制，而是由 DOM 元素本身控制。非受控组件通常用于简单的表单元素，例如：

```asp

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.usernameInput = React.createRef();
    this.passwordInput = React.createRef();
  }
  handleSubmit(event) {
    console.log(`Username: ${this.usernameInput.current.value}, Password: ${this.passwordInput.current.value}`);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Username:
          <input type="text" ref={this.usernameInput} />
        </label>
        <br />
        <label>
          Password:
          <input type="password" ref={this.passwordInput} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}
```
这两种方式各有优缺点，具体使用哪种方式取决于具体的需求和场景。

该分类下的相关小册推荐：

深入学习React实战进阶

React全家桶--前端开发与实例(下)

剑指Reactjs

React全家桶--前端开发与实例(上)

React 进阶实践指南