Question

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

因此，父级采取所有状态处理，而子级只接受道具并基于它们显示输出但是，我来到这个小问题：Child显示2个按钮（+和 - ）和两个单选按钮（称为1和2）。根据检查的无线电，我需要在父母处更新状态。

我想通过参考来做这件事，但我会坚持做好准备，避免使用它我想到的其他想法是传递按下按钮时被调用的函数（绑定到父级），但我看不到用子组件中传递的参数调用此函数的方法。

孩子：

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

在现实生活中，你可能会在onClick上附加一个Child方法来处理事件，并只将数据发送回Parent而不是整个事件。

如何在React中访问这些值？

1 个答案: