Javascript 如何在react.js中使列表项彼此独立单击

我试图使每个单独的列表项都可以点击。 在这里，我有一个颜色变化状态，使颜色变为红色。但每次我单击一个列表项，它都会使所有框变红。我想再次选择要变红的部分，而不是全部变红。一个正确方向的提示或链接就可以了

 import React, { Component } from 'react';
    import './App.css';
    import MainTool from './components/Layout/MainTool/MainTool.js';
    import Aux from './hoc/Aux.js';

    class App extends Component {

      state = {
        MainList: [
          "GamePlay",
          "Visuals",
          "Audio",
          "Story"
        ],
        color: "white"
      }

      changeEle = () =>{
        this.setState({color : "red"});
      }

      render() {
        return (
          <Aux>
            <MainTool MainList = {this.state.MainList}
            change = {this.changeEle}
            color = {this.state.color}/>
          </Aux>
        );
      }
    }

    export default App;

这个主工具只是将我的状态参数发送到Checkblock。仅供参考。虽然我以前犯过很多次错误，但这里不太可能有错误

import React from 'react';
import './MainTool.css';
import CheckBlock from '../../CheckBlock/CheckBlock';

const MainTool = props => {
    return (
        <div className = "mtborder">
            <CheckBlock MainList = {props.MainList}
            change = {props.change}
            color = {props.color}/>
        </div>
    );
};

export default MainTool;

这是我对问题所在的最佳猜测。我使用循环遍历我的状态对象数组，并打印出每个列表项旁边的列表和div。div是我希望使其可以单独单击的元素

import React from 'react';
import './CheckBlock.css';
import Aux from '../../hoc/Aux';

const CheckBlock = props => {

console.log(props.change);
console.log(props.color);

    let mainList = [];

    for(let i = 0; i <= 3; i++)
    {
        mainList[i] = <li key = {i} 
        className = "nameBox">{props.MainList[i]}
        <div onClick = {props.change} 
        style = {{backgroundColor: props.color}} 
        className = "clickBox"></div></li>
    }

    //console.log(dubi());

    return (
        <Aux>
            <ul className = "mainList">{mainList}</ul>
            <button>Enter</button>
        </Aux>
    );
};

export default CheckBlock;

---

您需要一个具有内部颜色状态的基于状态的ListItem组件。无需将函数传递为道具即可更改颜色。使用内部方法

类ListItem扩展组件{ 状态={颜色：'白色'}； onClick==>{ this.setState{color:'red'}； } 渲染{ 回来 {this.props.value} ; } } const CheckBlock=props=>{ console.logprops.change； console.logprops.color； 让mainList=[]；

---

对于let i=0；i我将jsfiddle放在一起：

让我知道是否有更好的实践来切换React中的元素

干杯

---

您正在使用一种状态来更改颜色，组件状态内的颜色将应用于所有列表项。您可以在单击索引的基础上添加红色。为所有列表分配类的Fir，单击时调用一个函数，在该函数中按文档获取所有列表项。getElementsByClassName，然后在单击列表的基础上添加样式颜色第二种方法是为每个列表项创建单独的组件，然后每个列表项都有自己的状态，并且可以更改任何列表项的颜色。

// ----------------APP-------------------
class App extends React.Component {
  state = {
    mainList: [
      {
        label: 'GamePlay',
        id: 1,
      },
      {
        label: 'Visuals',
        id: 2,
      },
      {
        label: 'Audio',
        id: 3,
      },
      {
        label: 'Story',
        id: 4,
      },
    ],
  }

  render() {
    const { mainList } = this.state;

    return (
      <div>
        <List mainList={mainList} />
      </div>
    );
  }
}

// ----------------LIST-------------------
const List = ({ mainList }) => (
  <div>
    {mainList.map((listItem) => {
      const { label, id } = listItem;

      return (
        <ListItem key={id} id={id} label={label} />
      );
    })}
  </div>
);

// ----------------LIST-ITEM-------------------
class ListItem extends React.Component{
    state = {
      selected: false,
    }

    changeColor = () => {
      const { selected } = this.state;

      this.setState({selected: !selected})
    }

    render(){
      const { label, id } = this.props;
      const { selected } = this.state;

      return console.log(selected ,' id - ', id ) || (
        <button 
          className={selected ? 'green' : 'red'}
          onClick= {() => this.changeColor()}
        >
          {label}
        </button>
    )   
  }
}