文章目录

    • React受控和非受控组件
      • 认识受控组件
      • 受控组件演练
      • 认识非受控组件(了解)

React受控和非受控组件

认识受控组件

在React中，HTML表单的处理方式和普通的DOM元素不太一样:表单元素通常会保存在一些内部的state。

比如下面的HTML表单元素:

这个处理方式是DOM默认处理HTML表单的行为，在用户点击提交时会提交到某个服务器中，并且刷新页面;

在React中，并没有禁止这个行为，它依然是有效的;

但是通常情况下会使用JavaScript函数来方便的处理表单提交，同时还可以访问用户填写的表单数据;

实现这种效果的标准方式是使用“受控组件”;

export class App extends PureComponent {  constructor() {    super()    this.state = {      username: ""    }  }  handleSubmitClick(event) {    // 1.阻止默认行为, 防止提交页面刷新    event.preventDefault()    // 2.获取到表单的数据    console.log(this.state.username)    // 3.之后就可以发送网络请求提交到服务器  }    changeUsername(event) {    this.setState({      username: event.target.value    })  }  render() {    const { username } = this.state    return (      <div>        <form onSubmit={e => this.handleSubmitClick(e)}>          <label htmlFor="username">            用户:             <input               type="text"               name=""               id="username"               value={username}               onChange={e => this.changeUsername(e)}             />          </label>          <button type='submit'>提交按钮</button>        </form>      </div>    )  }}

受控组件演练

input文本框

  • 在 HTML 中，表单元素(如、