如何在React中访问这些值？

Question

我有这个容器组件（父）和子组件。我正在构建我的应用程序与容器组件模式（我尝试:)）。

所以，父母接受所有状态处理，而孩子只接受道具并基于他们显示输出。
但是，我来到这个小问题：孩子显示2个按钮（+和 - ）和两个单选按钮（称他们1和2）。基于哪个无线电被检查，我需要在父母身份更新状态。

我想通过ref做到这一点，但我会保持良好的做法，并避免使用它。
我想过的其他想法是通过按钮按下（绑定到父）被调用的函数，但我看不到用子组件中传递的参数调用此函数的方法。

儿童：

<label><input type='radio' name='time'/> Work time</label> 
<label><input type='radio' name='time' /> Break time</label> 
<button onClick={this.props.valueControl} className='add'>+</button> 
<button onClick={this.props.valueControl} className='sub'>-</button> 

感谢您的帮助！

Answer 1

，你会从你的子组件父沟通的方式是通过使用属性传递回调：

在Parent.js

：

... 
    someEventOccured(event) { 
    this.modifyState(); 
    } 

    render() { 
    ... 
    <child-component onSomeEvent={this.someEventOccured.bind(this)}> 
    ... 
    } 
} 

在Child.js

：

... 
    render() { 
    ... 
    <button onClick={this.props.onSomeEvent}></button> 
    ... 
    } 
} 

在现实生活中，您可能会将一个Child方法附加到处理该事件的onClick，并仅将数据发送回Parent，而不是整个事件。