Reactjs 道具在React中未定义

我不熟悉

js

和

reactjs

。我试图创建一个

按钮组

，里面有几个

按钮

，希望当我点击一个特定的

按钮

（在

按钮组

）时，只有那个特定的按钮会被高亮显示（改变颜色），其余的都是正常颜色。 下面是执行上述行为的代码，但在

setcolor

方法中，我得到一个错误

\u this.state.selected.props未定义。有人能指出我错在哪里吗？还有，如果有人能告诉我这是解决这个问题的正确方法

从“React”导入React
进口{
按钮组，
按钮
}从“反应带”
类MainButtonsGroup扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
所选：空
}
}
handleSelection=（e）=>{
this.setState（{selected:e.target}）
}
设置颜色=（键）=>{
如果（此.state.selected）
{
//错误：\此.state.selected.props未定义
return（this.state.selected.props.key==key）？“primary”：“secondary”
}
}
render（）{
返回(
主钮扣
主按钮b
主按钮
)
}
}
导出默认主按钮组；
您不应该保留e.target引用，您必须在控制台中收到关于它的React警告？您刚刚在应用程序中创建了内存泄漏

而是从目标复制您需要的内容，并让引用被垃圾收集。尽管在您的情况下，不需要将数据附加到DOM节点：

<Button onClick={() => this.handleSelection(this.setColour(3))}>MainButtonC</Button>

然而，这段代码有点奇怪，只需记录单击按钮的索引，并给它一个类来设置样式，例如

class MainButtonsGroup extends React.Component {
  state = {
    selectedIndex: null,
  }

  handleSelection = (index) => {
    this.setState({selectedIndex: index})
  }

  render() {
    const idx = this.state.selectedIndex;

    return (
      <ButtonGroup>
        <Button className={idx === 1 ? 'primary' : 'secondary'} onClick={() => this.handleSelection(1)}>MainButtonA</Button>
        <Button className={idx === 2 ? 'primary' : 'secondary'} onClick={() => this.handleSelection(2)}>MainButtonB</Button>
        <Button className={idx === 3 ? 'primary' : 'secondary'} onClick={() => this.handleSelection(3)}>MainButtonC</Button>
      </ButtonGroup>
    );
  }
}

class MainButtonsGroup扩展了React.Component{
状态={
selectedIndex:null，
}
handleSelection=（索引）=>{
this.setState（{selectedIndex:index}）
}
render（）{
const idx=this.state.selectedIndex；
返回(
这个.handleSelection（1）}>MainButtonA
此.handleSelection（2）}>MainButtonB
此.handleSelection（3）}>main按钮
);
}
}
您无法从DOM节点获取组件的道具。您可以将按钮名称保留在组件状态的数组中，并使用该组件状态在render方法中渲染按钮

然后，您可以将按钮名称传递给
handleSelection
，并将其用作所选的
值。如果您的按钮是选中的按钮，则可以为其指定
主
颜色，否则为
次
颜色

示例

从“React”导入React；
从“react dom”导入react dom；
从“reactstrap”导入{ButtonGroup，Button}；
导入“bootstrap/dist/css/bootstrap.min.css”；
类MainButtonsGroup扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
按钮：[“A”、“B”、“C”]，
所选：空
};
}
handleSelection=按钮=>{
this.setState（{selected:button}）；
};
render（）{
const{buttons，selected}=this.state；
返回(
{buttons.map（按钮=>(
此.handleSelection（按钮）}
颜色={所选===按钮？“主要”：“次要”}
>
MainButton{button}
))}
);
}
}
您无法从DOM节点获取组件的道具。
e.target
是事件目标的底层DOM元素。而且，键应该由React独占地和内部地使用，而不是在状态中保留当前选择的记录。您可以将索引传递给
handleSelection
并在stateJust
this.props.key
中设置。您应该尝试使用css实现这一点。基于this.state.selected在按钮上设置特定的类名。查看一些想法，使用该库也不是一个坏主意。从react文档中，您不能以异步方式访问事件<代码>//不起作用。this.state.clickEvent将只包含空值。this.setState（{clickEvent:event}）感谢您的回复！我没有太多的声誉去投票给答案，因此我发表了这篇评论。谢谢你的回复！我没有太多的声誉去投票给答案，因此我发表了这条评论。很抱歉，我没有提到它，但是按钮名称将来自
这个。道具
，所以我们可能不需要它们作为
这个。状态的一部分。
class MainButtonsGroup extends React.Component {
  state = {
    selectedIndex: null,
  }

  handleSelection = (index) => {
    this.setState({selectedIndex: index})
  }

  render() {
    const idx = this.state.selectedIndex;

    return (
      <ButtonGroup>
        <Button className={idx === 1 ? 'primary' : 'secondary'} onClick={() => this.handleSelection(1)}>MainButtonA</Button>
        <Button className={idx === 2 ? 'primary' : 'secondary'} onClick={() => this.handleSelection(2)}>MainButtonB</Button>
        <Button className={idx === 3 ? 'primary' : 'secondary'} onClick={() => this.handleSelection(3)}>MainButtonC</Button>
      </ButtonGroup>
    );
  }
}