react受控组件操作表单

最新推荐文章于 2025-07-01 09:13:19 发布

追逐春天的大孩子

最新推荐文章于 2025-07-01 09:13:19 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/weixin_43709908/article/details/103465124

react 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种在React中管理表单状态的方法，通过给表单元素添加name属性并与state同步，实现统一的事件处理。涵盖了文本输入、富文本、下拉框及复选框的状态更新。

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

1.给每个表单元素添加一个name属性

2.name属性的值要和state中的状态值保持一致

3.使用同一个事件处理程序

class Hello extends React.Component {
  state = {
    txt: '',
    content:'',
    addresss:'zk',
    isChecked:true
  }
handleForm=(e)=>{
    const target=e.target
判断事件类型，如果是checkbox返回checked值，不是返回文本框的value值
    const value=target.type=='checkbox'?target.checked:target.value;
获取文本框的name值
    const name=target.name
    this.setState({
      [name]:value
    })
  }
  render() {
    return (
      <div>
        <p>{this.state.txt}</p>
        <p>{this.state.content}</p>
        <p>{this.state.address}</p>
        <input type="text" name="txt" value={this.state.txt} onChange={this.handleForm} />
        <br/>
        {/* 富文本框 */}
        <textarea name="content" value={this.state.content} onChange={this.handleForm}></textarea>
        {/* 下拉框 */}
        <select name="address" value={this.state.addresss} onChange={this.handleForm}>
          <option value="bj">北京</option>
          <option value="sh">上海</option>
          <option value="zk">周口</option>
        </select>
        {/* 复选框 */}
        <input name="isChecked" type="checkbox" checked={this.state.isChecked} onChange={this.handleForm}/>
      </div>
    )
  }

}
ReactDOM.render(<Hello />, document.getElementById('root'))