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

Question

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

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

我正在做的是经典的方式，将状态设置为false （打开）并在单击后切换。 如果open为真，则显示该组件，如果为假，则隐藏该组件。 onClick函数位于Clientes ，第一个子Clientes 。

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

更具体地说，容器只是接收数据并将其作为数组对象发送到Clientes组件。 每个数组都是一个列表，并且为每个数组创建一个Orcamentos组件，最后每个列表的所有项目都在其各自的Orcamentos内呈现。

我怎样才能让点击后只打开目标列表？

*Container ClientesControls：

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>
    );
  }
}

*儿童客户：

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>
  );
};

*儿童Orcamentos：

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>

  );
}

Answer 1

子Orcamentos组件需要控制自己的open状态。 您构建它的方式它们都采用与来自父ClientesControls的 prop 相同的状态，并且单击ClientesControls组件引用更新该状态的相同处理程序，因此当然它们都被激活。

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>

  );
}