0

bit of a React noob here and I've searched a fair bit for solutions to this issue, however I'm still confused. In short, I have a dropdown menu with a list of numbers, rendered from an array via map. The intent is to be able to change the value of "coloursValue" via setState by clicking on one of the buttons from the dropdown menu. Everything renders correctly, however when I attempt to click one of the buttons I am met w/ the error message "TypeError: Cannot read property 'changeValue' of undefined". I understand this is likely an issue relating to scope and "this" not being properly defined, yet changeValue is bound in the constructor. What am I doing wrong, and how can I rectify this?

Thank you very much in advance.

let colours = [1, 2, 3, 4, 5];

let coloursMapped = mapItems(colours, "coloursValue");


function mapItems(input, context) {
  let listItems = input.map(item =>
  <DropdownItem key={item}>
    <button onClick={() => this.changeValue.bind(this)}>
      {item}
    </button>
  </DropdownItem>
  );
  return <DropdownMenu right>
    {listItems}
  </DropdownMenu>
}

class App extends Component {

constructor(props) {
  super(props);

  this.changeValue = this.changeValue.bind(this);
  this.toggle = this.toggle.bind(this);
  this.state = {
    coloursValue: "# of Colours",
    dropdownOpen: [false, false, false]
  };
}

changeValue(value, context) {
  // modify "coloursValue" via setState according to the number 
  // selected via the "onClick" handler in "mapItems"
}

toggle(index) {
  let dropdownState = this.state.dropdownOpen.slice();
  dropdownState[index] = !this.state.dropdownOpen[index];
  this.setState({
    dropdownOpen: dropdownState
  });
}
4

1 回答 1

2

这是因为mapItems存在于类之外，所以它无权访问类作用域来绑定changeValue。移动mapItems到App组件中，它应该可以工作。您还应该作为状态移动colours并coloursMapped进入App组件。

于 2017-09-07T17:19:55.003 回答