react 受控元件,雙向繫結
阿新 • • 發佈:2022-05-08
學習視訊:https://www.bilibili.com/video/BV1wy4y1D7JT?p=34
一、受控元件
onChange方法實現
<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>
二、非受控元件
<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>