受控组件
受控组件的定义:对于表单元素来说他的值来自于state,对于普通组件来说,它的数据来自于外部,这样的组件被称为受控组件
受控组件的使用 :
1.普通组件:
在App组件里引用One组件,并且通过props把n和add方法传给One组件
class App extends React.Component {
// 挂在阶段的周期函数
constructor(props) {
super(props);
this.state = {
n: 1,
};
}
add = () => {
this.setState({
n: this.state.n + 1,
});
};
render() {
return (
<div className="App">
父组件{this.state.n}
<One n={this.state.n} />
<button onClick={this.add}>按钮</button>
</div>
);
One组件里的数据来自于父组件的n(即来源于props)
class App extends React.Component {
// 挂在阶段的周期函数
constructor(props) {
super(props);
this.state = {
n: 1,
};
}
add = () => {
this.setState({
n: this.state.n + 1,
});
};
render() {
return (
<div className="App">
父组件{this.state.n}
<One n={this.state.n} />
<button onClick={this.add}>按钮</button>
</div>
);
此时的One就是一个受控组件
2.表单元素
export default class Tian extends Component {
constructor(props) {
super(props);
this.state = {
list: {},
zhuang: false,
name: "请输入城市编号",
};
}
get = e => {
if (e.keyCode === 13) {
if (this.state.name === "") {
return;
}
this.setState({
list: res.data.weatherinfo,
zhuang: true,
});
};
gai = e => {
console.log(e);
this.setState({
[e.target.id]: e.target.value,
});
};
render() {
let { list, name } = this.state;
console.log(name);
return (
<div>
<input
type="text"
id="name"
onKeyUp={this.get}
value={name}
onChange={this.gai}
></input>
</div>
);
}
}
从上述代码中可以看出input框的值来自于state,且onChange监听着input框的变化,当输入框有变化时就改变state的值从而改变input框的值,此时input框就是一个受控组件
当有多个输入框的时候读取变化的输入框的值
this.setState({
[e.target.name] : e.target.value
})
千峰逆战班