react学习-受控组件与非受控组件

受控组件与非受控组件

受控组件

在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>