javascript - 如何在 react.js 中使列表项可以彼此单独点击

Question

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

 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;

这个 MainTool 只是将我的状态参数发送给 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;

Answer 1

您需要一个具有内部颜色状态的基于状态的 ListItem 组件。无需传递函数作为 Prop 来改变颜色。使用内部方法

class ListItem extends Component {
  state = { color : 'white' };
  onClick = () => {
     this.setState({ color: 'red' });
  }
  render () {
       return (
        <li key={i} className="nameBox">
            {this.props.value}
         <div onClick={this.onClick} style={{backgroundColor: props.color}} 
    className="clickBox">
        </div>
       </li>
   );
  }
}


const CheckBlock = props => {

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

    let mainList = [];

    for(let i = 0; i <= 3; i++)
    {
        mainList[i] = <ListItem key={i} value={props.MainList[i]} />

    }


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