React.js-如何更新多个孩子的父母国家改变的儿童

Question

我正在与React挣扎几天，所有教程都在说这是多么宏伟，这使我感到有人在欺骗我:)学习曲线，尤其是在我需要交往的时候 - 父母很烦人！无论如何...

考虑这种情况：我有多个按钮。每个按钮都有自己的类型。可能会有一种类型的截面按钮。整个想法是拥有启用其他按钮的按钮，并禁用其他按钮。我提供笔来查看工作示例，但是想象我有类型的按钮：

• settingson-它启用类型设置的所有按钮
• 设置 - 在开始时启用，在单击"设置"按钮后启用
• 下一步 - 它可以启用类型答案的所有按钮
• 答案 - 喜欢设置，单击下一个按钮后启用。

普通按钮看起来像这样：

<MyButton name='next'       type="next"       check={() => this.checker("next")} toggle={this.toggler.bind(this)} />

父级发送切换函数并检查带有参数的功能。仅在开始时才能启用Setteron和Next。它是由app。 state .next设置为true和app。如果app.state.answers是错误的类型答案的所有组件均已禁用。现在，一切似乎都在这里工作，但是最后一件事不是：如果我按" Next"按钮，它将检查什么是父级的状态。答案并将其设置为true(检查控制台登录我的笔以进行确认(。但是，将父母的this.state.swer更改为true并不是类型答案的重新组件。

说实话，我想让它变得不那么混乱，学习反应，但是几天前我可以在一小时内通过jQuery做到这一点：/有很好的解决方案解决我的问题吗？我应该回到贾克里忘记反应吗？还是我离解决问题的一步是一步？请帮助！

链接到codepen

Answer 1

这是我在您的Codepen上注意到的几件事，它们是可能的问题。

 onClicked(){
          this.setState = { answer:  this.props.toggle("answer") };
          // should be
          this.setState({ 
               answer: this.props.toggle("answer)
          });
    }

另一个观察结果是在componentDidMount上，您正在用this.setState({ answer: false, isActive: this.props.check("next") })设置默认状态，因为它避免了rerender，我会将这些默认状态移至constructor()。

我不确定这是否是反模式，但是我会避免设置/获得

的状态

 this.setState({
         [type]: !this.state[type]
         // instead use
         type: !this.state.type
     }) 

最后，我认为我能够获得您所问的内容的工作组成部分，请参阅此codepen.io。希望这会有所帮助，愉快的编码！