ReactJS onClick在列表项更改div

Question

我正在反应点击事件我有一个列表，我想设置onClick事件时，一个列表项被点击。并显示特定列表的<div>

代码:

import React from "react";
import { Container, Grid,Accordion } from "semantic-ui-react";


class Powerups extends React.Component{
constructor(props){
super(props);
this.state={
activeIndex: 1
}
this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
}
componentWillMount() {}
componentWillUnmount() {}
componentDidMount() {}
componentWillReceiveProps(nProps) {}


handleClick(index) {
const { activeIndex } = this.state
const newIndex = activeIndex === index ? -1 : index
this.setState({ activeIndex: newIndex })
}
handleChange(){

}


render() {
const { activeIndex } = this.state
return(

<div className="powerups-root">


<div style={{background: '#fff'}}>
<Container className="power-header-image">
<div style={{textAlign: 'center',marginTop: 32}}>
<h1><span style={{color: '#FF6701',fontWeight :'bold'}}>STACKBY POWERUPS</span></h1>
<h2><span style={{fontWeight :'bold'}}>Use powerups to make your lives easier.</span></h2>
</div>
</Container>
</div> 

<Container style={{marginBottom: 75}}>
<Grid>
<Grid.Column mobile={16} tablet={4} computer={4}>
<div className="sidebar-bx">
<div className="sidebar-title">
<h2>categories</h2>
</div>
<ul className="sidebar-items" id="tags">
<li id="All"><span style={{ textDecoration: 'underline' }}>All</span></li> 
<li id="Import"><span>Import</span></li>
<li id="Sharing"><span>Sharing</span></li>
<li id="Data Recovery"><span>Data Recovery</span></li>
<li id="Data Transformation"><span>Data Transformation</span></li>
<li id="Automation"><span>Automation</span></li>
<li id="Apps"><span>Apps</span></li>
</ul>
</div>
</Grid.Column>
<Grid.Column container mobile={16} tablet={12} computer={12} container className="powerup" style={{marginLeft:'0px !important',height: 'fit-content', width: '100%'}}>

<Accordion className="stack-links">
<div className="card" id="Data Recovery">
<ul>
<li>
<Accordion.Title className="flex items-center" active={activeIndex === 1} index={1} onClick={() => this.handleClick(1)}>
Stack Export
</Accordion.Title>
</li>
<li>
<a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
Live
</a> 
</li>
</ul>
<Accordion.Content active={activeIndex === 1}>
<p>Export your complete stack back in an excel sheet .</p>
</Accordion.Content>
</div>
<div className="card" id="Data Transformation">
<ul>
<li>
<Accordion.Title className="flex items-center" active={activeIndex === 2} index={2} onClick={() => this.handleClick(2)}>
Append CSV file in an existing table
</Accordion.Title>
</li>
<li>
<a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
Live
</a> 
</li>
</ul>
<Accordion.Content active={activeIndex === 2}>
<p>Import a CSV file into an existing table and map the columns to take the form of your table.</p>
</Accordion.Content>
</div>
<div className="card" id="Import">
<ul>
<li>
<Accordion.Title className="flex items-center" active={activeIndex === 3} index={3} onClick={() => this.handleClick(3)}>
Google Sheet Importer
</Accordion.Title>
</li>
<li>
<a className="live-lable" style={{ color: 'white', background: '#FF6701', border: '2px solid #FF6701',marginLeft:'10px', paddingBottom: '1px' }}>
Coming soon     
</a> 
</li>
</ul>
<Accordion.Content active={activeIndex === 3}>
<p>Connect your Google Sheet Account and import your sheets data directly into your stacks.</p>
</Accordion.Content>
</div>         
<div className="card" id="Import">
<ul>
<li>
<Accordion.Title className="flex items-center" active={activeIndex === 4} index={4} onClick={() => this.handleClick(4)}>
Microsoft Excel Importer
</Accordion.Title>
</li>
<li>
<a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
Live
</a> 
</li>
</ul>
<Accordion.Content active={activeIndex === 4}>
<p>Import an excel file to create a new stack or import it to a table.</p>
</Accordion.Content>
</div>          
<div className="card" id="Sharing">
<ul>
<li>
<Accordion.Title className="flex items-center" active={activeIndex === 5} index={5} onClick={() => this.handleClick(5)}>
View level sharing
</Accordion.Title>
</li>
<li>
<a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
Live
</a> 
</li>
</ul>
<Accordion.Content active={activeIndex === 5}>
<p>Share individual views with anyone in your team - only share filtered rows, or even hide columns.</p>
</Accordion.Content>
</div>  
<div className="card" id="Data Recovery">
<ul>
<li>
<Accordion.Title className="flex items-center" active={activeIndex === 6} index={6} onClick={() => this.handleClick(6)}>
Recycle Bin
</Accordion.Title>
</li>
<li>
<a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
Live
</a> 
</li>
</ul>
<Accordion.Content active={activeIndex === 6}>
<p>Recover deleted items (Tables, Views, Rows and Columns) from last 7 days.</p>
</Accordion.Content>
</div>   
<div className="card" id="Data Transformation">
<ul>
<li>
<Accordion.Title className="flex items-center" active={activeIndex === 7} index={7} onClick={() => this.handleClick(7)}>
Deduplication
</Accordion.Title>
</li>
<li>
<a className="live-lable" style={{ color: 'white', background: '#FF6701', border: '2px solid #FF6701',marginLeft:'10px', paddingBottom: '1px' }}>
Coming soon
</a> 
</li>
</ul>
<Accordion.Content active={activeIndex === 7}>
<p>Import data and manage duplicate rows in the same table.</p>
</Accordion.Content>
</div>     
<div className="card" id="Automation">
<ul>
<li>
<Accordion.Title className="flex items-center" active={activeIndex === 8} index={8} onClick={() => this.handleClick(8)}>
Automate your API column type
</Accordion.Title>
</li>
<li>
<a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
Live
</a> 
</li>
</ul>
<Accordion.Content active={activeIndex === 8}>
<p>Set automated schedules (daily, 3 days, weekly, biweekly, monthly) on your API column type and keep yourself up to date at all times. Note: Please check total limits based on your plan.</p>
</Accordion.Content>
</div>    
<div className="card" id="Apps">
<ul>
<li>
<Accordion.Title className="flex items-center" active={activeIndex === 9} index={9} onClick={() => this.handleClick(9)}>
Google Drive Sync
</Accordion.Title>
</li>
<li>
<a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
Live
</a> 
</li>
</ul>
<Accordion.Content active={activeIndex === 9}>
<p>Sync your stacks directly with your Google Drive Account and open/create stacks from Google Drive.</p>
</Accordion.Content>
</div>
<div className="card" id="Apps">
<ul>
<li>
<Accordion.Title className="flex items-center" active={activeIndex === 10} index={10} onClick={() => this.handleClick(10)}>
Google Chrome Extension
</Accordion.Title>
</li>
<li>
<a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
Live
</a> 
</li>
</ul>
<Accordion.Content active={activeIndex === 10}>
<p>Clip information from any webpage, through a custom google chrome extension <a href="#">Download it from here</a>.</p>
</Accordion.Content>
</div>     
</Accordion>


</Grid.Column>
</Grid>


</Container>



</div>
)
}
}

const mapStateToProps = ({ auth }) => {
return { auth }
}

export default connect(mapStateToProps, {})(Powerups);

我想当我点击特定的类别，如导入然后输入importdiv

所以，我不明白这个，我将重新尝试这个谁来帮忙

谢谢!

Answer 1

您可以为列表项创建一个对象数组，然后将列表信息传递给子组件并显示内容。

这是一个关于如何实现你的目标的工作示例，

Code Sandbox =>https://codesandbox.io/s/frosty-bird-vqzzp?file=/src/App.js: 0 - 892

import React, { useState } from "react";
import "./styles.css";
const listItems = [
{ id: "0", title: "One", content: " I AM ONE" },
{ id: "1", title: "Two", content: " I AM TWO" },
{ id: "2", title: "Three", content: " I AM THREE" }
];
const ListView = ({listId}) => {
const listView = listItems.map((item) => {
if (item.id === listId) {
return <span>{item.content}</span>;
}
});
return <div>{listView}</div>;
};
const App = () => {
const [showListView, setShowListView] = useState(false);
const [listId, setListId] = useState(null);
const listClickHandler = (id) => {
setListId(id);
};
const list = listItems.map((item) => {
return <li onClick={() => listClickHandler(item.id)}>{item.title}</li>;
});
return (
<div className="App">
<ul>{list}</ul>
<ListView listId={listId} />
</div>
);
};
export default App;