反应js - 将一个值从孩子传递给父母，然后传给另一个孩子？

编辑：感谢您的答复家伙。我在这里找到了我的问题的根源。由于某种原因，代码（我从别人那里继承）多次调用我的组件，覆盖我的值。我想我可以从这里拿走它。无论如何，谢谢你们。反应js - 将一个值从孩子传递给父母，然后传给另一个孩子？

我的部件都设置这样的：

A 
- B 
- C

而且我想B，触发时，传递一个值回A，并设置一个新的状态。然后，当一个事件被触发时，A会将该值传递给C作为道具。

到目前为止，我已经尝试创造一个函数，然后把它传递到B为道具，因为这样的：

A: 

handler(){ 
    setState({value: someVal}); 
} 

render(){ 
    <B func={this.handler}/> 
    eventTriggered <C cProp={this.state.value}/> 
}

然而，正如（我是发现）的setState（）是异步的，当C挂载的时候，this.state.value可能没有从B分配的值。

也许我的整个方法是错误的，但是有无补救的办法吗？

在此先感谢。

来源

2017-08-04 qunayu

您能否提供一段代码来模拟这种情况与任何在线编辑器？以这种方式获取你的背景会更容易。 – Rowland

在您的render()方法中，直到事件被触发并且状态具有一个值（例如，

render() { 
    return (
     <B func={this.handler} /> 
     {eventTriggered && this.state.value && 
      <C cProp={this.state.value} /> 
     } 
    ) 
}

编辑：

确保在A组份您有：

constructor(props) { 
    super(props); 
    this.handler = this.handler.bind(this); 
}

来源

2017-08-04 11:02:59 Tony

感谢您的回复。我也尝试过这种方法，但是C从来没有被挂载，因为this.state.value从来没有变过。 – qunayu

@qunayu你把'handler'绑定到你的父组件'this'吗？ – Tony

通常情况下，你可以使用第二个参数setState（功能）

解决这类问题的

例如

handleClick(e){ 
    this.setState({value: e.target.value},() => this.props.onChange(this.state.value)) 
}

第二个函数只会在状态和解时触发onChange支撑。如果您想更早地触发它，请发送原始值e.target.value而不是

来源

2017-08-04 11:04:28

感谢您的回答。我尝试过使用回调函数，但因为我试图完成的操作是最终将值作为道具发送给render（）中的另一个组件，所以我不确定回调是否适合我的情况。 – qunayu

反应js - 将一个值从孩子传递给父母，然后传给另一个孩子？

回答

相关问题