React-组件-受控组件
受控组件
- 值受到 react 控制的表单元素
import React from "react";
class App extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
name: 'BNTang'
}
}
render() {
return (
<form>
<input type="text"
value={this.state.name}
onChange={(e) => {
this.change(e);
}}/>
</form>
)
}
change(e) {
console.log(e.target.value);
this.setState({
name: e.target.value
});
}
}
export default App;
受控组件处理技巧
在我们有多个受控组件的时候，这个时候有可能需要编写多个受控组件的处理方法，如果给每一个受控组件绑定一个对应的名称，我们就可以抽离出来一个公共的处理方法处理即可。
import React from 'react';
class App extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
name: 'BNTang',
email: '303158131@qq.com',
phone: '18819522032'
}
}
render() {
return (
<form>
<input type="text"
value={this.state.name}
name={'name'}
onChange={(e) => {
this.change(e)
}}/>
<input type="email"
name={'email'}
value={this.state.email}
onChange={(e) => {
this.change(e)
}}/>
<input type="number"
name={'phone'}
value={this.state.phone}
onChange={(e) => {
this.change(e)
}}/>
</form>
)
}
change(e) {
this.setState({
[e.target.name]: e.target.value
})
}
}
export default App;
