如何在React组件上管理状态,该组件可以从父级或事件中的事件更改状态？

我正在尝试创建一个自定义复选框组件(实际上是一个三态,但除了说我不只是使用INPUT之外,这是无关紧要的),我不知道如何让它能够改变" "检查"来自对自身的点击以及来自父母的价值集.

目前,我让它作为一个自给自足的组件工作,它接受一个onChange prop与它调用的处理程序回调,以便在点击后发送父组件的值.它使用状态来存储由显示器引用的检查.

如果它只是一个检查的显示,从外面管理价值,我自然会使用道具.如果它只是一个自给自足的复选框组件,它取了一个初始值然后只响应了点击,我会像我一样使用状态,但我的问题是我希望它可以点击以打开和关闭它,允许父母也打开和关闭它.

我是React的初学者和"React的思维方式"所以我怀疑我只是接近这个错误.我得到的印象是,这样做的正确方法是将它作为一个仅显示组件,将点击向上传递给父级进行处理,然后从父级接收到值更改的道具更新,但是在我看来,这会使组件的可重用性降低.

那么我将如何从内部和父源进行复选框更改？

我们也欢迎相关链接.

您可以将复选框视为一个哑组件,这意味着它不包含任何内部状态,但只通过道具从外部接收数据然后再渲染它们.您可以在此处查看哑组件的详细定义.

同时,当单击复选框时,此类事件将由组件的父级或事件祖先处理,这称为反向数据流,这在Facebook的反思中的思考博客文章中有所描述.

此外,为了确定哪个组件应该具有某些状态,我发现以下指南非常有用:

请记住:React是关于组件层次结构中的单向数据流.可能不会立即清楚哪个组件应该拥有哪个状态.对于新手来说,这通常是最具挑战性的部分,因此请按照以下步骤来弄清楚:

对于您的应用程序中的每个州:

根据该状态识别呈现某些内容的每个组件.

查找公共所有者组件(在层次结构中需要状态的所有组件上方的单个组件).

公共所有者或层次结构中较高层的其他组件应该拥有该状态.

如果找不到拥有状态的组件,只需创建一个新组件来保存状态,并将其添加到公共所有者组件上方的层次结构中的某个位置.

伪代码片段:

const Checkbox = React.createClass({
  // Propagate the event to parents
  onClick(evt) {
    if (this.props.handleClick) {
      this.props.handleClick({checked: evt.target.value});
    }
  },

  render() {
    return (
      this.props.checked ? 
         : 
        
    );
  }
});

const Container = React.createClass({
  handleClick(evt) {
    // Change the container's state, which eventually changes the checkbox's view via props.
    this.setState({checked: evt.checked});
  },

  render() {
    return (
      

    );
  }
});