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中是否有更好的方法来切换元素；

干杯！

List item toggle 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>
    )   
  }
}

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

2 个答案: