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
   })

千峰逆战班

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值