React-表单(受控组件和非受控组件)

最新推荐文章于 2024-08-03 09:28:46 发布

庚中

最新推荐文章于 2024-08-03 09:28:46 发布

阅读量2.5k

点赞数 3

分类专栏：十七.React 文章标签： React-表单(受控组件和非受控组件)

本文链接：https://blog.csdn.net/xiaodi520520/article/details/93719978

版权

本文详细介绍了React中表单的两种管理方式：受控组件和非受控组件。受控组件的值由React控制，状态变化必须通过setState方法，而非受控组件则允许数据在DOM中直接管理，简化代码但可能增加集成复杂性。文章通过代码示例展示了受控组件在input、textarea和select中的应用，并总结了其特点。

摘要由CSDN通过智能技术生成

一,受控组件

在HTML当中，像input,textarea和select这类表单元素会维持自身状态，并根据用户输入进行更新。
在React中，可变的状态通常保存在组件的state中，并且只能用 setState() 方法进行更新.
React根据初始状态渲染表单组件，接受用户后续输入，改变表单组件内部的状态。
因此，将那些值由React控制的表单元素称为：受控组件。

代码演示如下:

1.input文本标签的受控方法

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

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
   
    // this.setState({value: event.target.value});
    this.setState({
   value: event.target.value.trim()});//这可以去除首尾空格
  }

  handleSubmit(event) {
   
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

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

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