React学习笔记之八:表单数据的双向绑定

最新推荐文章于 2025-06-05 09:07:54 发布

原创最新推荐文章于 2025-06-05 09:07:54 发布 · 996 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#React #表单绑定

React学习笔记同时被 2 个专栏收录

26 篇文章

订阅专栏

React

19 篇文章

订阅专栏

本文主要介绍了React中表单的双向数据绑定，包括单选、下拉、输入等控件的数据绑定方法。通过绑定value属性到state，监听onChange事件，结合event.target.value更新state值来实现数据同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

7.表单的双向数据绑定

具体代码可以参考我的github中的my-app

参考博文：React表单事件和取值

通常需要获取用户在表单内填写的信息，实现对于用户数据的获取并上传，因此表单数据的绑定十分重要，这次我们将对单选，下拉，输入分别进行数据的绑定


class Form extends Component {
  constructor(props) {
    super(props);
    this.state = { content: '', sex: '1', fruit: '' };
    this.inputChangeHandler = this.inputChangeHandler.bind(this);
    this.sexChange = this.sexChange.bind(this);
    this.fruitChange = this.fruitChange.bind(this);
  }
  // 输入框onChange绑定事件
  inputChangeHandler(event) {
    this.setState({ content: event.target.value });
  }
  // 单选框onChange绑定事件
  sexChange(event) {
    this.setState({ sex: event.target.value });
  }
  // 下拉框onChange绑定事件
  fruitChange(event) {
    this.setState({ fruit: event.target.value });
  }

  render() {
    // 下拉元素的动态生成
    const fruitSelector = ['banana', 'apple', 'orange'].map((elem, index) => (
      <option value={elem} key={index}>
        {elem}
      </option>
    ));
    return (
      <div className="wrapper">
        <div className="input">
          <input
            type="text"
            value={this.state.content}
            onChange={this.inputChangeHandler}
          />
          <div>INPUT: {this.state.content}</div>
        </div>

        <div className="sex">
          <input
            type="radio"
            value="1"
            checked={this.state.sex === '1'}
            onChange={this.sexChange}
          />
          男
          <input
            type="radio"
            value="2"
            checked={this.state.sex === '2'}
            onChange={this.sexChange}
          />
          女<div>SEX:{this.state.sex === '1' ? '男' : '女'}</div>
        </div>

        <div className="select">
          <select
            name="city"
            value={this.state.fruit}
            onChange={this.fruitChange}
          >
            {fruitSelector}
          </select>
          <div>SELECTED:{this.state.fruit}</div>
        </div>
      </div>
    );
  }
}

双向绑定的方法:

绑定表单的value属性值到state中的变量
监听表单控件的onChange事件,当表单发生变化的时候触发绑定事件函数
利用绑定事件传入的event.target获取变化事件对象，通过event.target.value获取相应事件变化的相应值
通过将state中的value重新赋值实现数据的绑定显示