1 render() {
2 return (
3 <div>
4 <h1>非受控组件</h1>
5 <form action="" onSubmit={this.handleSub}>
6 姓名：<input ref={(e) => {this.username = e}} type="text" name="username" /><br></br>
7 密码：<input ref={(e) => {this.password = e}} type="text" name="password"/><br></br>
8 <button>提交</button>
9 </form>
10 </div>
11 )
12 }
13 handleSub = (event) => {
14 event.preventDefault() //因为表单有个action属性，表示提交地址，默认不写绘刷新当前页面，所以说阻止默认事件，我们实际开发中是以ajax请求，做到不刷新页面的
15 console.log(this)
16 const {username, password} = this
17 alert(`姓名:${username.value}, 密码：${password.value}`)
18 }
受控组件：输入框随着用户的输入把值维护到状态里面去，等用的时候从状态里面获取，例如vue直接利用v-model双向绑定的原理实现
1 render() {
2 return (
3 <div>
4 <h1>非受控组件</h1>
5 <form action="" onSubmit={this.handleSub}>
6 姓名：
7 <input onChange={this.handlename} type="text" name="username" />
8 密码：
9 <input onChange={this.handleword} type="text" name="password" />
10 <button>提交</button>
11 </form>
12 </div>
13 );
14 }
15 handlename = (e) => {
16 this.setState({username:e.target.value})
17 }
18 handleword = (e) => {
19 this.setState({password:e.target.value})
20 }
21
22 handleSub = (event) => {
23 event.preventDefault(); //因为表单有个action属性，表示提交地址，默认不写绘刷新当前页面，所以说阻止默认事件，我们实际开发中是以ajax请求，做到不刷新页面的
24 console.log(this);
25 const { username, password } = this.state;
26 alert(`姓名:${username}, 密码：${password}`);
27 };
