react学习-受控组件与非受控组件2023-11-12 17:24:58受控组件与非受控组件 受控组件 在HTML中,标签、、<select>的值的改变通常是根据用户输入进行更新。在React中,可变状态通常保存在组件的状态属性中,并且只能使用 setState() 更新,而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况,以这种由React控制的输入表单元素而改变其值的方式,称为:“受控组件”。在受控组件中,组件渲染出的状态与他的value或checked属性相对应,react通过这种方式消除了组件的局部状态,使整个状态可控。</p> </blockquote> <p><strong>受控组件更新state的流程</strong></p> <ul> <li>可以通过初始state设置表单默认值</li> <li>每当表单的值发生 变化时,调用onChange事件处理器</li> <li>事件处理器通过事件对象拿到改变后的 状态,并更新组件的state</li> <li>一旦通过setState方法更新state,就会触发视图重新渲染,完成表单的重新渲染</li> </ul> <pre><code class="language-javascript"> <script type="text/babel"> //创建组件 class Login extends React.Component{ //初始化状态 state = { username:‘‘, //用户名 password:‘‘ //密码 } //保存用户名到状态中 saveUsername = (event)=>{ this.setState({username:event.target.value}) } //保存密码到状态中 savePassword = (event)=>{ this.setState({password:event.target.value}) } //表单提交的回调 handleSubmit = (event)=>{ event.preventDefault() //阻止表单提交 const {username,password} = this.state alert(`你输入的用户名是:${username},你输入的密码是:${password}`) } render(){ return( <form onSubmit={this.handleSubmit}> 用户名:<input onChange={this.saveUsername} type="text" name="username"/> 密码:<input onChange={this.savePassword} type="password" name="password"/> <button>登录</button> </form> ) } } //渲染组件 ReactDOM.render(<Login/>,document.getElementById(‘test‘)) </script> </code></pre> <h4 id="非受控组件">非受控组件</h4> <blockquote> <p>表单数据由DOM本身处理。即<code>不受setState()</code>的控制,与传统的HTML表单输入相似,input输入值即显示最新值(使用 <code>ref</code>从DOM获取表单值)</p> </blockquote> <pre><code class="language-javascript"><script type="text/babel"> //创建组件 class Login extends React.Component{ handleSubmit = (event)=>{ event.preventDefault() //阻止表单提交 const {username,password} = this alert(`你输入的用户名是:${username.value},你输入的密码是:${password.value}`) } render(){ return( <form onSubmit={this.handleSubmit}> 用户名:<input ref={c => this.username = c} type="text" name="username"/> 密码:<input ref={c => this.password = c} type="password" name="password"/> <button>登录</button> </form> ) } } //渲染组件 ReactDOM.render(<Login/>,document.getElementById(‘test‘)) </script> </code></pre> react学习-受控组件与非受控组件上一篇:Kafka源码阅读系列——Producer下一篇:查找某目录下占用空间前几的文件并计算占用空间大小总和