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

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

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 元素本身控制。非受控组件通常用于简单的表单元素，例如：

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>
    );
  }
}

这两种方式各有优缺点，具体使用哪种方式取决于具体的需求和场景。