更新状态上的每个项目单击事件

Question

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

已编辑：每次单击应仅更新一个项目，例如，如果我点击按钮，它应该将状态更改为仅ID: 1firsItemisSelectedtrueID: 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>

    )

  }

}

Answer 1

请查看此完整示例。基本上，您在单击处理程序上设置状态时遇到了问题。selectItemClickHandler = () => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; listItems: [{itemOptionSelector: [{isSelected: true}]}]&nbsp; &nbsp; })&nbsp; }selectItemClickHandler 的更新代码应为：selectItemClickHandler = (event, index) => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState(prevState => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const list = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; prevState.listItems.map((item, i) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (i === index) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.itemOptionSelector.map(selector => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selector.isSelected = true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list.push(item);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listItems: list&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; };以下是我更改上述代码的完整示例import React, {Component} from 'react'export default class ListExample extends Component {&nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listItems: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'firstItem',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemOptionSelector: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {id: 1,isSelected: false},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {id: 2,isSelected: false},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {id: 3,isSelected: false},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'secondItem',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemOptionSelector: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {id: 1,isSelected: false},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {id: 2,isSelected: false},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {id: 3,isSelected: false},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; selectItemClickHandler = (event, index) => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState(prevState => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const list = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; prevState.listItems.map((item, i) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (i === index) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.itemOptionSelector.map(selector => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selector.isSelected = true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list.push(item);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listItems: list&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; };&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; const {listItems} = this.state;&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {listItems.map((item, index) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <div key={index} className="button" onClick={(event) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.selectItemClickHandler(event, index)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>{item.name}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={()=>{ console.log(this.state, 'current state') }}>Show State in Console</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}

Answer 2

首先，不清楚你想做什么。您没有呈现“子项”（或选项），因此当前无法知道应将哪个选项更改为所选状态。通常，您可以像这样更新数组状态：state = {&nbsp; items: [&nbsp; &nbsp; { isSelected: false, name: 'first' },&nbsp; &nbsp; { isSelected: false, name: 'second' },&nbsp; &nbsp; { isSelected: false, name: 'third' },&nbsp; ]};// ...handleItemClick = (item, index) => {&nbsp; const items = this.state.items.slice();&nbsp; items[index] = { ...item, isSelected: !item.isSelected };&nbsp; this.setState({ items });};render() {&nbsp; return this.state.items.map((item, index) =>&nbsp; &nbsp; <div onClick={() => this.handleItemClick(item, index)}>{item.name}</div>);}

Answer 3

我将发布一个示例，因为不清楚您要更新的内容。假设这是您的状态。state = {&nbsp; items: [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; isSelected: false,&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; id: 2,&nbsp; &nbsp; &nbsp; isSelected: false,&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; id: 3,&nbsp; &nbsp; &nbsp; isSelected: false,&nbsp; &nbsp; }&nbsp; ]};这就是你如何渲染你的项目。<ul>&nbsp; {this.state.items.map((item, index) => (&nbsp; &nbsp; <li key={item.id} onClick={this.handleToggle(index)}>&nbsp; &nbsp; &nbsp; {item.id} {item.isSelected + ""}&nbsp; &nbsp; </li>&nbsp; &nbsp;))}</ul>然后，您的处理程序需要如下所示。// pay attention to the handler which creates a closurehandleToggle = index => () => {&nbsp; const items = [...this.state.items];&nbsp; items[index].isSelected = !items[index].isSelected;&nbsp; this.setState({ items });};