React的受控组件和非受控组件介绍

文章目录

React受控和非受控组件

认识受控组件

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

比如下面的HTML表单元素:

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

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

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

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

exportclassAppextendsPureComponent{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，因此显示的值将随着用户输入而更新。

exportclassAppextendsPureComponent{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比较相似:

exportclassAppextendsPureComponent{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来选中。

exportclassAppextendsPureComponent{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。

exportclassAppextendsPureComponent{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>)}}