1: 受控组件,不使用 ref,会把值存放在state状态中,用的时候直接去状态中取。类似于vue和angualr中的双向数据绑定。
2:如果js中对象的key为变量记得加[]。
3:函数需要加参数,需要写成回调函数的形式。
class Login extends React.Component {
state={
username:'',password:''};
render(){
return (
<form onSubmit={
this.handleSubmit}>
用户姓名:<input type='text' onChange={
(e)=>this.save('username',e)}/>
用户密码:<input type='password' onChange={
(e)=>this.save('password',e)}/>
<button>保存</button>
</form>
)
}
handleSubmit=(event)=>{
event.preventDefault();
alert(`用户名:${
this.state.username},密码:${
this.state.password}`);
}
save=(...rest)=>{
this.setState({
[rest[0]]:rest[1].target.value});
}
}
ReactDOM.render(<Login/>,document.getElementById('test'));