Question

我正在创建一个应用，单击该应用时需要更新元素的类名。这些元素最多有3000个，它们以阵列的状态保持。

现在我在下面执行此操作，并且可以正常工作，但是我应该使用setState吗？什么都没有添加或删除数组，只有className发生了变化（顺便说一句，addColorHandler与状态不在同一个文件中）

var files = JObject.Parse(YourJSON);
var recList = files.SelectTokens("$..data").ToList();
foreach (JObject obj in recList.Children())
 {
   foreach (JProperty prop in obj.Children())
      {
        var key = prop.Name.ToString();
        var value = prop.Value.ToString();
         //Do your stuffs here
      }

  }

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

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

    state = {
        bulbs: 3496,
        display: []

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

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

反应：需要更新状态中数组中元素的className

1 个答案: