如何使列表项在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组件。 无需传递函数作为改变颜色的道具。 使用内部方法

 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> ); }; 

Answer 2

我把jsfiddle放在一起：

让我知道在React中切换元素是否有更好的做法;

干杯!

• 列表项切换jsfiddle

// ----------------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>
    )   
  }
}