ReactJS - 使用默认状态渲染

Question

如何使用getInitialState()中的状态重新呈现组件？

例如：https://jsbin.com/pajapoyipo/edit?html,output

在示例代码中我单击按钮，组件按钮更改状态和按钮为黄色 - 它的工作，但是当我点击另一个按钮时我想点击按钮是黄色（它的工作），并且旧按钮已更改状态和颜色为红色（不起作用）。

Answer 1

避免这样的事情：

childState.setState({klasa: "yellow"});

您不应该从父级设置子状态。状态是组件的内部，它应该只能自行更改。相反，父母可以使用不同的道具重新渲染孩子。

如果您只想激活一个按钮，那么您必须拥有一些只允许一个活动按钮的状态。由于孩子们不能了解他们的兄弟姐妹，所以这片州必须住在父母身边。我称之为activeBtn。如果activeBtn为1，则第一个按钮显示为黄色。父级中的这段状态对应于子级中的布尔属性active。我还在父级中定义了一个单击处理程序来更改状态。此单击处理程序作为prop传递给每个子项。

如果这没有意义，修改后的代码应作为更好的解释： https://jsbin.com/filasisemu/1/edit?html,output