道具在 React 中未定义

Question

我是 js 和 reactjs 的新手。我正在尝试创建一个 ButtonGroup，里面只有几个 Buttons，希望当我单击特定的 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 来设置它的样式，例如

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

Answer 2

您无法从 DOM 节点获取组件的 props。您可以改为将按钮名称保存在组件状态的数组中，并使用它在渲染方法中渲染按钮。

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

例子

import React from "react";
import ReactDOM from "react-dom";
import { ButtonGroup, Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

class MainButtonsGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      buttons: ["A", "B", "C"],
      selected: null
    };
  }

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

  render() {
    const { buttons, selected } = this.state;

    return (
      <ButtonGroup>
        {buttons.map(button => (
          <Button
            key={button}
            onClick={() => this.handleSelection(button)}
            color={selected === button ? "primary" : "secondary"}
          >
            MainButton{button}
          </Button>
        ))}
      </ButtonGroup>
    );
  }
}

道具在 React 中未定义

Props are undefined in React

reactjs

reactstrap

react-props