Question

无法弄清楚如何创建以下功能。我目前将数据（本地json）加载到li。点击后，我想为点击的li元素添加一个新组件和数据。

示例：

<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 
        3 
        <div id="data">
        <!-- appended data -->
        </div>
    </li>
</ul>

点击另一个li后，应移除上一个附加元素，并将其添加到新点击的li中。（行切换）

如果有人能够在正确的反应方向踢我。

import React, { Component } from 'react';
import Flowers from 'flowers.json';

class Flowers extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      isToggleOn: true
    };

    this.onClick = this.handleClick.bind(this);
  }


  handleClick = (e) => {
    console.log(this);
    console.log(e);
    console.log('li item clicked! ' + e.currentTarget);
    // appends to clicked div
    e.currentTarget.style.backgroundColor = '#ccc';
  }

  render() {
    const List = Flowers.map((flower) =>
      <li onClick={this.handleClick.bind(this)} key={flower.id} id={flower.id}>
        {flower.name}
      </li>
    );

    return(
        <ul>{List}</ul>
    );
  }
}

class App extends Component {
  render() {
    return (
      <Flowers />
    );
  }
}

export default App;

Answer 1

您可以向您的州添加有效花卉的ID。例如。

this.state = { ActiveFlowerID: null }

所以当没有ActiveFlower没有打开时。在句柄上单击方法对状态进行更改，并使用与花朵ID和状态匹配的if渲染花朵附加数据。

希望这有帮助。

React JS将组件添加到特定的click li

1 个答案: