反应：需要更新 state 中数组中元素的类名

Question

我正在创建一个应用程序，我需要在单击时更新元素的类名。 这些元素有 3000 个，它们保存在 state 的数组中。

现在我在下面做这个并且它有效，但我应该使用 setState 吗？ 没有从数组中添加或删除任何内容，只有 className 的变化（顺便说一句，addColorHandler 与 state 不在同一个文件中）

    addColorHandler = (e) => {
        let clicked = e.target
        if (this.state.color !== null) {
          clicked.className = this.state.color 
        }
    }

    state = {
        bulbs: 3496,
        display: []

如果我应该使用 setState，我将如何访问数组中单击的元素并将其更改为 class？ 我无法开始弄清楚语法的外观。

class App extends Component {
  state = {
    color: null,
    selectedColor: null
  }

  addColorHandler = (e) => {
    let clicked = e.target
    console.log(clicked)
    if (this.state.color !== null) {
      clicked.className = this.state.color
    }
  }

  changeColorHandler = (e) => {
    switch (e.target.className) {
      case('color red-peg'):
        this.setState({ color: 'bulb red', selectedColor: 'red-peg'})
        break
      case('color blue-peg'):
        this.setState({ color: 'bulb blue', selectedColor: 'blue-peg'})
        break
      case('color green-peg'):
        this.setState({ color: 'bulb green', selectedColor: 'green-peg'})
        break
      case('color orange-peg'):
        this.setState({ color: 'bulb orange', selectedColor: 'orange-peg'})
        break
      case('color yellow-peg'):
        this.setState({ color: 'bulb yellow', selectedColor: 'yellow-peg'})
        break
      case('color pink-peg'):
        this.setState({ color: 'bulb pink', selectedColor: 'pink-peg'})
        break
      case('color purple-peg'):
        this.setState({ color: 'bulb purple', selectedColor: 'purple-peg'})
        break
      case('color white-peg'):
        this.setState({ color: 'bulb white', selectedColor: 'white-peg'})
        break
      case('clear-peg'):
        this.setState({ color: 'bulb clear', selectedColor: 'clear-peg'})
        break
      default:
        this.setState({ color: 'bulb clear', selectedColor: 'clear-peg'})
    }
  }

  render () {
    return (
      <div className="App">
        <Display color={ this.state.color } addColor={ this.addColorHandler}/>
        <ColorBoard
          color = { this.state.color }
          selectedColor = { this.state.selectedColor }
          changeColor={ this.changeColorHandler }
        />
      </div>
    )
  }
}

export default App

class Display extends Component {
  state = {
    bulbs: 3496,
    display: []
  }

  componentDidMount () {
    this.createDisplay()
  }

  createDisplay = () => {

    const displayBoard = []
    for (let i = 0; i < this.state.bulbs; i++) {
      displayBoard.push(
        <Light
          key={i}
          addColor={ this.props.addColor }
          color ={ this.props.color }
        />
      )
    }
    this.setState({display: displayBoard})
  }

Answer 1

请提供更多代码示例，以便我为您提供帮助。 同时，我可以告诉你的是在你的组件中添加一个KEY或一个ID ，这样我们就可以找到哪个被点击了。

例子：

list = [
 {item: 'a', id:'1'}
]

const Example = list => {
 onClickHandler = e => {
  console.log(e.target.id)
 }

 const render = list.map(item => (
  <div id={item.id} onClick={onClickHandler}> {item.item} </div>
 )

 return ( <div> {render} </div> )
}

这可能会给你一个想法。 但您也可以直接在 OnClick 上包含 ID，如下所示：onClick={() => onClickHandler(item.id)}。 但是，根据应用程序的大小，它可能会导致一些处理丢失。 无论如何，我希望它有所帮助！

奖金： https://www.freecodecamp.org/forum/t/react-js-passing-button-id-as-parameter-onclick-function/62301