开发者问题收集

React 中的 Props 未定义

2018-08-06
11560
reactjs react-props reactstrap

我是 js 和 reactjs 的新手。我试图创建一个包含几个 Buttons 的 ButtonGroup ，希望当我单击某个特定的 Button （在 ButtonGroup 中）时，只有该特定按钮会突出显示（更改颜色），其余按钮将保持正常颜色。 以下是执行上述行为的代码，但在 setColour 方法中，我收到错误 _this.state.selected.props 未定义 。有人能指出我错在哪里吗？此外，如果有人能告诉我这是否是解决这个问题的正确方法。 

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;
2个回答

您不应该保留 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>
    );
  }
}
nanobar
2018-08-06

您无法从 DOM 节点获取组件的 props。您可以将按钮名称保存在组件状态的数组中，并使用该数组在 render 方法中呈现按钮。

然后，您可以将按钮名称传递给 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>
    );
  }
}
Tholle
2018-08-06