react 处理表单数据：受控组件/非受控组件

最新推荐文章于 2022-12-31 22:32:48 发布

FIND方式

最新推荐文章于 2022-12-31 22:32:48 发布

阅读量829

点赞数

分类专栏： react 文章标签： react.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_43091563/article/details/120966984

版权

react 专栏收录该内容

7 篇文章

订阅专栏

本文详细比较了React中的受控组件与非受控组件，介绍了它们如何管理表单数据、状态更新方式，并展示了各自的使用示例。

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

在大多数情况下，我们推荐使用受控组件来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。
另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。

受控组件

表单元素根据用户输入进行更新state状态

constructor(props) {
    super(props);
    this.state = {value: ''};
  }
handleChange(event) {
    this.setState({value: event.target.value});
  }
handleSubmit(event) {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();// 阻止表单action默认提交
  }

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

表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源。
对于受控组件来说，输入的值始终由 React 的 state 驱动。

非受控组件

使用 ref 来从 DOM 节点中获取表单数据。

初始值

	constructor(props) {
		this.formRef = React.createRef<FormInstance>();
		this.input = React.createRef<FormInstance>();
	}
	
  handleSubmit(e) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }
  
    render() {
    return (
      <form ref={this.formRef}onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }