Question

我有一个子反应组件，我想从子组件设置父组件的状态。我该如何实现？

class Parent extends React.Component{
  constructor( props ){
     super(props);
     this.state ={
         request:{
            ip: "",
            location:""
          }
     };
  }
  render(){
    return(
          <Child request={this.state.request} />
      );
   }
}

现在在子页面中，我要设置ip的值。

class Child extends React.Component{
  constructor( props ){
     super(props);
     this.onChange = this.onChange.bind( this );
  }
  render(){
    return(
        <Input id = "ip" type = "text" name = "case"  onChange = { ( e ) => { this.onChange( e ); } }/>
      );
   }

onChange( e ) {
    this.setState( { ...this.props.request, ip: e } );
  }

}

Answer 1

我不确定这是否是最正确的（也是最反应式的方法），但是我会定义一个函数来更改Parents类中父母的状态，并将其作为prop传递给孩子，如下所示： / p>

class Parent extends React.Component{
  constructor( props ){
     super(props);
     this.state ={
         request:{
            ip: ""
          }
     };
  }

  changeIP = (newIp) => {
    // Do your checks beforehand
    this.setState({
     request: {
        ...this.state.request,
        ip: newIp
     }      
    })
  }

  render(){
    return(
          <Child request={this.state.request} changeIP={this.changeIP} />
      );
   }
}

然后在子类中，当您要设置父级的状态时，可以像下面这样调用该函数：

class Child extends React.Component{
    constructor( props ){
       super(props);
       this.onChange = this.onChange.bind( this );
    }
    render(){
      return(
          <Input id = "ip" type = "text" name = "case"  onChange = { ( e ) => { this.onChange( e ); } }/>
        );
     }

  onChange( e ) {
      this.props.changeIP(e.target.value) // I think it should be 'e.target.value', make sure you pass the right value here
    }

  }

希望这会有所帮助

Answer 2

父母

class Parent extends React.Component{
  constructor( props ){
     super(props);
     this.state ={
         request:{
            ip: "",
            location:""
         }
     };
  }

  handleIpChange (value) => {
    this.setState({...this.state, request:{...this.state.request, ip : value)};
  }

  render(){
    return(
          <Child request={this.state.request} onIpChange={this.handleIpChange}/>
      );
   }
}

孩子

class Child extends React.Component{
  constructor( props ){
     super(props);
  }
  render(){
    return(
        <Input id = "ip" type = "text" name = "case"  onChange = {e => this.onChange(e);}/>
      );
   }

  onChange = e => this.props.onIpChange(e.target.value)

}

要更改更高组件的状态，您必须通过道具传递更新其状态的函数。别忘了，如果您不使用箭头功能() => {}，则必须将其绑定在较高的组件中：

this.function = this.function.bind(this);

如果要在您的状态下更新多个值，您还可以尝试类似的方法（解决输入中使用的名称参数）

handleInputChange(e) {
        let request = Object.assign({}, this.state.request);
        switch (e.target.name) {
            case 'location': // do something specific + break; 
            case 'ip': // or let it empty if you have nothing specific to do at the moment
            default:
                request[e.target.name] = e.target.value;
        }
        this.setState({request});
}

Answer 3

您的孩子中没有州，因此您无法在其中使用this.setState。

您可以像这样向Child发送一个函数：

<Child 
 request={this.state.request} 
 changeRequest={(v) => {this.setState({
  request: {ip: v}
  })}}
/>

然后在孩子中调用changeRequest。

如何在React中从另一个组件中设置组件的状态

3 个答案: