受控组件通过setState,e.target.vaule修改value,
非受控组件通过ref操作dom获取value
点击提交都能拿到value
受控组件
import React, { Component } from 'react';
class FormDemo extends Component {
state = {
value:''
}
handlerSumbit=(e)=>{
e.preventDefault();
console.log(this.state.value)
}
onChangeHandler=(e)=>{
this.setState({
value:e.target.value
})
}
render() {
return (
<div>
<form onSubmit={this.handlerSumbit}>
<input type="text" value={this.state.value} onChange={this.onChangeHandler}/>
<input type="submit" value='提交'/>
</form>
</div>
);
}
}
export default FormDemo;
非受控组件
import React, { Component } from 'react';
class RefsForm extends Component {
username=React.createRef();
password=React.createRef();
clickHandler=(e)=>{
console.log(this.username.current.value,this.password.current.value);
}
render() {
return (
<div>
<input type="text" ref={this.username}/>
<input type="text" ref={this.password}/>
<button onClick={this.clickHandler}>提交</button>
</div>
);
}
}
export default RefsForm;