Question

我正在与React挣扎几天，并且所有的教程都说它有多么壮观让我觉得有人在欺骗我:)学习曲线尤其是当我需要教育孩子 - 亲子 - 这是非常烦人的！反正...

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

settingsOn - 它启用设置
设置 - 在开始时禁用，在单击settingsOn按钮
next - 它启用 answer
答案 - 类似设置，点击下一步按钮后启用。

普通按钮如下所示：

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

父发送切换功能并使用参数检查功能到子。在开始时仅启用settingOn和next。它由App。 state .next设置为true，App。 state .answers设置为false。如果App.state.answers为false，则禁用所有类型答案的组件。现在，一切似乎都在这里工作，但最后一件事不是：如果我按下按钮＆＃34; next＆＃34;它检查什么是父的state.answer并将其设置为true（检查我的笔中的控制台日志以确认）。但是，更改父级的this.state.answer为true并不会重新呈现类型为answer的组件。

老实说，我想让它不那么混乱并学习React，但似乎我可以在几天前通过jQuery在一小时内完成：/我的问题是否有一个很好的解决方案？我应该回到jQuery并忘记React吗？或者我是解决问题的一步？请帮忙！

链接到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") })设置默认状态，我会将这些默认状态移至constructor()，因为它会避免重新呈现。

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

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

最后，我认为我能够得到你所要求的工作组件，请参阅codepen.io。希望这有帮助，编码愉快！

REACT.JS - 如何通过一个孩子更新父母状态变化的多个孩子

1 个答案: