在 React 中，表单元素如 input、textarea、select 等，可以通过受控组件和非受控组件两种方式来管理其值。

受控组件是由 React 来管理其值的组件，其值通过 props 传递给组件，并由组件的事件处理函数来更新组件的状态，从而更新其值。受控组件的值是由 React 所控制的，因此可以实现更精细的控制和验证，例如限制输入内容的长度、格式等。示例代码如下：

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

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

  handleSubmit = (event) => {
    alert('The value is: ' + this.state.value);
    event.preventDefault();
  };

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

在上面的例子中，我们通过给 input 元素设置 value 属性来将其变成受控组件，值由this.state.value 控制，通过 handleChange 事件处理函数更新状态。

非受控组件是由 DOM 自己管理其值的组件，其值由用户输入或 DOM 操作直接改变，不需要React 来管理。非受控组件的值是由 DOM 所控制的，因此无法进行精细的控制和验证，但可以在某些场景下简化代码。示例代码如下：

js
class UncontrolledComponent extends React.Component {
  handleSubmit = (event) => {
    alert('The value is: ' + this.input.value);
    event.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Value:
          <input type="text" ref={(input) => (this.input = input)} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

在上面的例子中，我们通过使用 ref 属性来将 input 元素变成非受控组件，其值由 DOM 自己管理，通过 this.input.value 来获取其值。需要注意的是，使用 ref 来访问 DOM 元素是一种比较底层的方法，应该尽量避免使用。

总之，受控组件和非受控组件各有优缺点，在具体场景下需要根据需求来选择合适的方式。