react中受控组件的使用

受控组件

受控组件的定义：对于表单元素来说他的值来自于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
   })

千峰逆战班