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

无法找出创建以下函数的方式。我目前加载数据（本地JSON）到li。点击后，我想添加一个新的组件到点击数据的li元素。React JS将组件添加到特定的单击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;

来源

2017-03-07 DanteKlein

您可以添加到您的状态活动花的ID。例如

this.state = { ActiveFlowerID: null }

所以当没有ActiveFlower没有打开。在处理点击方法上，对状态进行更改，并使用if匹配花朵ID和状态呈现花朵附加数据。

希望这会有所帮助。

来源

2017-03-07 14:41:08 Zri

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

回答

相关问题