Javascript 通过onClick事件-REACT.JS打开特定组件

我有一些来自Firebase的数据，我正在将它们作为列表打印到应用程序中。但是，首先我只想为每个列表打印一个标题，当单击这些标题时，必须显示它们的特定列表

我可以通过单击隐藏和显示列表，但这会发生在所有列表上，而不仅仅是目标列表

我所做的是一种经典的方式，将状态设置为

false

（打开），并在单击后进行切换。如果

open

为true，则显示该组件，如果为false，则隐藏该组件。

onClick

功能位于

Clientes

中，即第一个子项

我有一个基于类的容器和两个功能组件

更具体地说，容器只是接收数据并将其作为数组的对象发送给

客户

组件。每个数组都是一个列表，为每个数组创建一个

Orcamentos

组件，最后每个列表的所有项目都在其各自的

Orcamentos

中呈现

我如何使目标列表在单击后打开

*容器客户端控件：

class ClientesControls extends Component {

state = {
    clientes: null,
    retorno: false,
    open: false
}

openOrcamentosHandler = () => {

    let open = this.state.open;

    this.setState({open: !open})

}

componentDidMount() {

    axios.get('/clientes.json')
        .then(res => {
            this.setState({clientes: res.data, retorno: true})     
        })
        .catch(error => console.log(error))

}

render() {

    let inserirClientes = <div>Carregando...</div>

    if (this.state.retorno) {

        inserirClientes = (
            Object.keys(this.state.clientes)
                .map(key => <Clientes 
                                key={Math.random()} 
                                clienteInfo={this.state.clientes[key]} 
                                open={this.state.open} 
                                openHandler={this.openOrcamentosHandler}  
                            />)
        )
    }


    return (
        <div>
            { inserirClientes }
        </div>
    );
  }
}

类ClientesControls扩展组件{
状态={
客户：空，
否:错,，
开放：假
}
openOrcamentosHandler=（）=>{
让打开=this.state.open；
this.setState（{open:！open}）
}
componentDidMount（）{
get（'/clientes.json'）
。然后（res=>{
this.setState（{clientes:res.data，returno:true}）
})
.catch（错误=>console.log（错误））
}
render（）{
让inserirClientes=Carregando。。。
if（this.state.no）{
内圆客户=(
Object.key（this.state.clientes）
.map（键=>）
)
}
返回(
{inserirClientes}
);
}
}

*儿童客户：

const clientes = props => {

return (
    <div>

        {
            Object.keys(props.clienteInfo)
                .map(key => {
                   return (
                    <div key={Math.random()} onClick={props.openHandler}>
                        <Orcamentos orcamentosInfo={props.clienteInfo[key]} open={props.open}/>
                    </div>
                )})
        }
    </div>
  );
};

const客户=道具=>{
返回(
{
Object.key（props.clientinfo）
.map（键=>{
返回(
)})
}
);
};

*奥卡门托斯儿童：

const orcamentos = props => {

let nome = Object.keys(props.orcamentosInfo)
                .map(k => props.orcamentosInfo[k].nomeCliente);

return (

    <div>
        <h4>{nome[0]}</h4>
        {
            Object.keys(props.orcamentosInfo)
                .map(k => <p key={Math.random()} >{ props.open ? props.orcamentosInfo[k].data : null}</p>)
        }

    </div>

  );
}

const orcamentos=props=>{
设nome=Object.keys（props.orcamentosInfo）
.map（k=>props.orcamentosInfo[k].nomeCliente）；
返回(
{nome[0]}
{
对象键（props.orcamentosInfo）
.map（k=>
{props.open？props.orcamentosInfo[k]。数据：null}
）
}
);
}

子

Orcamentos

组件需要控制自己的

打开状态。按照您构建它的方式，它们都从父级
客户端控件中获取相同的状态作为道具，并单击任一子组件引用更新该状态的相同处理程序，因此它们当然都处于激活状态

const orcamentos = props => {

const [open, setOpen] = React.useState(false);

let nome = Object.keys(props.orcamentosInfo)
                .map(k => props.orcamentosInfo[k].nomeCliente);

return (

    <div onClick={() => setOpen(!open)}>
        <h4>{nome[0]}</h4>
        {
            Object.keys(props.orcamentosInfo)
                .map(k => <p key={Math.random()} >{ open ? props.orcamentosInfo[k].data : null}</p>)
        }

    </div>

  );
}


const orcamentos=props=>{
const[open，setOpen]=React.useState（false）；
设nome=Object.keys（props.orcamentosInfo）
.map（k=>props.orcamentosInfo[k].nomeCliente）；
返回(
setOpen（！open）}>
{nome[0]}
{
对象键（props.orcamentosInfo）
.map（k=>
{open？props.orcamentosInfo[k]。数据：null}
）
}
);
}