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

先根据需求完成代码: 需要有个登录的功能,点击登录时弹出该输入框对应的值

利用ref可以这样写:

 1 class App extends React.Component {
 2     // 创建ref容器
 3     userName = React.createRef()
 4     passWord = React.createRef()
 5 
 6     login = () => {
 7         alert(`用户名为: ${this.userName.current.value};密码为: ${this.passWord.current.value}`)
 8     }
 9 
10     render() {
11         return(
12             <div>
13                 <input ref={ this.userName } type="text" placeholder="用户名" />
14                 <input ref={ this.passWord } type="text" placeholder="密码" />
15                 <button onClick={ this.login }>登录</button>
16             </div>
17         )
18     }
19 }
20 ReactDOM.render(<App />, document.getElementById('app'))

这就是一个非受控组件

然而还有一种利用state的写法(类似于Vue的data)

 1 class App extends React.Component {
 2     // 在login方法中需要拿到e.target.value,所以需要一个变量,state可以完全满足
 3     state = {
 4         userName: "",
 5         passWord: "",
 6     }
 7     saveUserName = (e) => {
 8         this.setState({ userName: e.target.value })
 9     }
10     savePassWord = (e) => {
11         this.setState({ passWord: e.target.value })
12     }
13     login = () => {
14         alert(`用户名为: ${this.state.userName};密码为: ${this.state.passWord}`)
15     }
16 
17     render() {
18         return (
19             <div>
20                 <input onChange={this.saveUserName} type="text" placeholder="用户名" />
21                 <input onChange={this.savePassWord} type="text" placeholder="密码" />
22                 <button onClick={this.login}>登录</button>
23             </div>
24         )
25     }
26 }
27 ReactDOM.render(<App />, document.getElementById("app"))

利用了ref的就是非受控组件,没有利用ref的便是受控组件

posted @ 2021-01-13 18:01  微笑着的代码狗  阅读(86)  评论(0)    收藏  举报