reactjs - React 中的 props 是未定义的

Question

我是 js 和 reactjs 的新手。我正在尝试创建一个里面有几个 Button 的 ButtonGroup ，希望当我单击特定的 Button 时(在 ButtonGroup)只有特定按钮会突出显示(改变颜色)，其余按钮将是正常颜色。 下面是执行上述行为的代码，但在 setColour 方法中，我收到错误 _this.state.selected.props is undefined。有人可以指出我错在哪里吗？另外，如果有人可以告诉我这是否是解决这个问题的正确方法。

import React from "react"
import {
    ButtonGroup,
    Button
} from "reactstrap"


class MainButtonsGroup extends React.Component {
constructor (props) {
    super(props)
    this.state = {
        selected: null
    }
}

handleSelection = (e) => {
    this.setState({selected: e.target})
}

setColour = (key) => {
    if (this.state.selected)
    {
        // ERROR : _this.state.selected.props is undefined
        return (this.state.selected.props.key === key) ? 'primary' : 'secondary'
    }
}

render() {
    return (
        <ButtonGroup>
            <Button key={1} onClick={this.handleSelection} color={this.setColour(1)}>MainButtonA</Button>
            <Button key={2} onClick={this.handleSelection} color={this.setColour(2)}>MainButtonB</Button>
            <Button key={3} onClick={this.handleSelection} color={this.setColour(3)}>MainButtonC</Button>
        </ButtonGroup>
    )
}
}

export default MainButtonsGroup;

Answer 1

您不应该保留 e.target 引用，并且您的控制台中一定会收到有关它的 React 警告？您刚刚在应用程序中造成了内存泄漏。

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

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

请注意，除非您在循环中映射元素，否则不需要 key={3}。

handleSelection = (color) => {
    this.setState({ selected: color })
}

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

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>
    );
  }
}