javascript - 对列表的单击项做出反应

Question

我有一些问题要通过反应解决任务。

当我单击元素时，我需要更改列表中选定元素的样式。目前，所有元素都在点击时被选中。有人可以帮助我吗？

之后，我需要选择一组项目并更改样式。enter code here任何想法？

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;

标签： javascriptreactjsonclick

Answer 1

您需要存储在 id 的活动节点的状态中。

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>

        )
    }
}