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> <pre><code class="language-javascript"><script type="text/babel"> const {username,password} = this alert(`你輸入的使用者名是：${username.value},你輸入的密碼是：${password.value}`) 使用者名：<input ref={c => this.username = c} type="text" name="username"/> 密碼：<input ref={c => this.password = c} type="password" name="password"/>