对列表的点击项做出反应

Question

I have some problems to solve a task with react.

I need to change the style of the selected element of a list, when I click on the element. At the moment, all the elements are selected on click. Could someone help me?

After that, I need to select a group of items and change the style also. enter code here Any idea?

const nodes = [
  {id: 0, name: 'aaa', parent: null },
  {id: 1, name: 'bbb', parent: 0 },
  {id: 2, name: 'ccc', parent: 0 },
  {id: 3, name: 'ddd', parent: null },
  {id: 4, name: 'eee', parent: 3 },
  {id: 5, name: 'fff', parent: 3 },
  {id: 6, name: 'ggg', parent: 3 },
  {id: 7, name: 'hhh', parent: null },
  {id: 8, name: 'iii', parent: 7 },
  {id: 9, name: 'jjj', parent: 8 },
  {id: 10, name: 'kkk', parent: 9 },
  {id: 11, name: 'lll', parent: 9 },
  {id: 12, name: 'mmm', parent: 9 },
  {id: 13, name: 'nnn', parent: 8 },
  {id: 14, name: 'ooo', parent: 13 },
  {id: 15, name: 'ppp', parent: 13 },
  {id: 16, name: 'qqq', parent: 13 },
  {id: 17, name: 'rrr', parent: null },
  {id: 18, name: 'sss', parent: 17 },
  {id: 19, name: 'ttt', parent: 17 },
  {id: 20, name: 'uuu', parent: 19 },
  {id: 21, name: 'vvv', parent: 19 },
  {id: 22, name: 'www', parent: 17 },
  {id: 23, name: 'xxx', parent: 17 },
  {id: 24, name: 'yyy', parent: 23 },
  {id: 25, name: 'zzz', parent: 23 }
];

class App extends React.Component {
  constructor(){
    super();

    this.state = {
       colorDefault: true
    }
  }

  changeColor(){
     this.setState({ colorDefault: !this.state.colorDefault })
  }

  render(){
    let nodeColorBlue = {color: '#00f'};
    let nodeColorDefault = {color: '#000'};
    let nodeColor = this.state.colorDefault ? nodeColorDefault : nodeColorBlue;

    const renderNodes = nodes.map(node =>
      <li key={node.id}
          style={nodeColor}
          onClick={this.changeColor.bind(this)}
          >
          {node.name}
      </li>
    );

      return (

        <div className="App">
             <ul>{renderNodes}</ul>
        </div>

        )
    }
}

export default App;

Answer 1

You need store in the state of the id's active node.

class App extends React.Component {
  constructor(){
    super();

    this.state = {
       selectedNodeId: null
    }
  }

  changeColor(selectedNodeId) {
     this.setState({ selectedNodeId })
  }

  render() {
    const renderNodes = nodes.map(node =>
      <li key={node.id}
          style={{ color: node.id === this.state.selectedNodeId ? '#00f' : '#000' }}
          onClick={this.changeColor.bind(this, node.id)}
          >
          {node.name}
      </li>
    );

      return (

        <div className="App">
             <ul>{renderNodes}</ul>
        </div>

        )
    }
}

Answer 2

You can use useState

import React, {useState} from 'react'

const List = (props) => {
  const [selectedNode, setNode] = useState(null);
  return (
    <div className="App">
      {nodes.map(node => (
        <li key={node.id} onClick={() => setNode(node)}
            style={{ color: node === selectedNode ? '#00f' : '#000' }} >
          {node.name}
        </li>
      ))}
    </div>
  );
}

Answer 3

class App extends React.Component {
  constructor(){
    super();

    this.state = {
       selectedNodeIds: []
    }
  }

  toggleNode(nodeId) {
     this.setState(state => {
        const selectedNodeIds = state.selectedNodeIds.includes(nodeId)
           ? selectedNodeIds.filter(id => id !== nodeId) // remove item
           : [ ...selectedNodeIds, nodeId ]; // add item
        return {
            selectedNodeIds,
        };
     });
  }

  render() {
    const renderNodes = nodes.map(node =>
      <li key={node.id}
          style={{ color: this.state.selectedNodeIds.includes(node.id) ? '#00f' : '#000' }}
          onClick={this.toggleNode.bind(this, node.id)}
          >
          {node.name}
      </li>
    );

      return (

        <div className="App">
             <ul>{renderNodes}</ul>
        </div>

        )
    }
}