受控非受控组件（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 中 ，表单元素(如<input> 、 <textarea> 和 <select>)之类的表单元素通常自己维护 state ，并根据用户输入进行更新 。 而在 React 中 ，可变状态(mutable state)通常保存在组件的 state 属性中 ，并且只能通过使用 setState()来更新 。我们将两者结合起来 ，使React的state成为“唯一数据源 ”;
渲染表单的 React 组件还控制着用户输入过程中表单发生的操作;
被 React 以这种方式控制取值的表单输入元素就叫做“受控组件 ”;
由于在表单元素上设置了 value 属性 ，因此显示的值将始终为 this.state.inputValue ，这使得 React 的 state 成为唯一数据源 。
由于 inputChange 在每次按键时都会执行并更新 React 的 state ，因此显示的值将随着用户输入而更新 。
export class App extends PureComponent { constructor() { super() this.state = { inputValue: "abcd" } } inputChange(event) { this.setState({ inputValue: event.target.value }) } render() { const { inputValue } = this.state return ( <div> <input type="text" value={inputValue} onChange={e => this.inputChange(e)}/> </div> ) } }checkbox标签
texteare标签和input比较相似:
export class App extends PureComponent { constructor() { super() this.state = { isAgree: false } } handleSubmitClick(event) { // 1.阻止默认行为, 防止提交页面刷新 event.preventDefault() // 2.获取到表单的数据 console.log(this.state.isAgree) // 3.之后就可以发送网络请求提交到服务器 } inputChange(event) { this.setState({ isAgree: event.target.checked }) } render() { const { isAgree } = this.state return ( <div> <form onSubmit={e => this.handleSubmitClick(e)}> <label htmlFor="agree"> {/* 复选框绑定checked */} <input id="agree" type="checkbox" checked={isAgree} onChange={e => this.inputChange(e)} /> 同意协议 </label> <div> <button type=submit>提交按钮</button> </div> </form> </div> ) } }select标签
select标签的使用也非常简单 ，只是它不需要通过selected属性来控制哪一个被选中 ，它可以匹配state的value来选中 。
export class App extends PureComponent { constructor() { super() this.state = { fruit: "apple" } } handleSubmitClick(event) { // 1.阻止默认行为, 防止提交页面刷新 event.preventDefault() // 2.获取到表单的数据 console.log(this.state.fruit) // 3.之后就可以发送网络请求提交到服务器 } changeSelect(event) { this.setState({ fruit: event.target.value }) } render() { const { fruit } = this.state return ( <div> <form onSubmit={e => this.handleSubmitClick(e)}> <select value={fruit} onChange={e => this.changeSelect(e)}> <option value="apple">苹果</option> <option value="orgin">橙子</option> <option value="banana">香蕉</option> </select> <div> <button type=submit>提交按钮</button> </div> </form> </div> ) } }认识非受控组件(了解)
React推荐大多数情况下使用 受控组件 来处理表单数据:
一个受控组件中 ，表单数据是由 React 组件来管理的
另一种替代方案是使用非受控组件 ，这时表单数据将交由DOM节点来处理;
如果要使用非受控组件中的数据 ，那么我们需要使用 ref 来从DOM节点中获取表单数据 。
我们来进行一个简单的演练:
使用ref来获取input元素;
在非受控组件中通常使用defaultValue来设置默认值;
同样 ，<input type=“checkbox ”> 和 <input type=“radio ”> 支持 defaultChecked ，<select> 和 <textarea> 支持 defaultValue 。
export class App extends PureComponent { constructor() { super() this.state = { name: "chenyq" } this.nameRef = createRef() } handleSubmitClick(event) { // 1.阻止默认行为, 防止提交页面刷新 event.preventDefault() // 2.非受控组件获取值 console.log(this.nameRef.current.value) // 3.之后就可以发送网络请求提交到服务器 } componentDidMount() { // 再通过原生的方式监听变化, 不建议, 非受控组件还是在操作DOM // this.nameRef.current.addEventListener } render() { const { name } = this.state return ( <div> <input type="text" defaultValue={name} ref={this.nameRef} /> <div> <button type=submit>提交按钮</button> </div> </form> </div> ) } }创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！