javascript - 更新状态 onClick 事件中的每个项目

Question

我正在尝试通过单击按钮来更新状态中的每个项目。每个项目的初始状态为 FALSE (isSelected)，如果用户在按钮类 div 上执行 onClick 事件，它应该将当前项目的状态 (isSelected) 更新为 TRUE，但我不知道如何完成此操作。

已编辑：每次点击它应该只更新一个项目，例如，如果我点击它的按钮ID: 1，firsItem它应该将isSelected状态更改为true仅适用于ID: 1

这是我的代码示例（我认为应该如何）

import React, { Component } from 'react'

export default class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listItems: [{
        name: 'firstItem',
        itemOptionSelector: [{
          id: 1,
          isSelected: false
        },
        {
          id: 2,
          isSelected: false
        },
        {
          id: 3,
          isSelected: false
        },
        ]
      },
      {
        name: 'secondItem',
        itemOptionSelector: [{
          id: 1,
          isSelected: false
        },
        {
          id: 2,
          isSelected: false
        },
        {
          id: 3,
          isSelected: false
        },
        ]
      }
      ]
    }
  }

  selectItemClickHandler = () => {
    this.setState({
      listItems: [{itemOptionSelector: [{isSelected: true}]}]
    })
  }

  render() {
    const {listItems} = this.state

    return (
      <div>
        {listItems.map(item => {
          <div className="button" onClick={this.selectItemClickHandler}>{item.name}</div>
        })}
      </div>
    )
  }

}

标签： javascriptreactjs

Answer 1

首先，尚不清楚您要做什么。您没有呈现您的“子项目”（或选项），因此目前无法知道应该将哪个选项更改为选定状态。

通常，您像这样更新数组状态：

state = {
  items: [
    { isSelected: false, name: 'first' },
    { isSelected: false, name: 'second' },
    { isSelected: false, name: 'third' },
  ]
};

// ...

handleItemClick = (item, index) => {
  const items = this.state.items.slice();
  items[index] = { ...item, isSelected: !item.isSelected };
  this.setState({ items });
};

render() {
  return this.state.items.map((item, index) =>
    <div onClick={() => this.handleItemClick(item, index)}>{item.name}</div>);
}