Question

我需要做一个包含一系列学科的可折叠部分。学科存储在一个数组中。我写了一个onClick事件，但除了我点击的一个学科外，我让它们全部滑落了。如何将事件应用于每个元素，以便我可以决定将哪个元素向下滑动？

export default class Predictions extends React.Component {
constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state={
        display: 'block',
    };
}
handleClick(e) {

    this.setState({
        display: this.state.display === 'none' ? 'block' : 'none',
    });
    console.log('click', e);
};
render() {
    return (
        <section className="l-section c-predictions" >
            <h2 className="header" >Predictions</h2>
            <div className="content">
                {this.props.disciplines.map((discipline, index) => {

                    return (
                        <div onClick={event => this.handleClick(discipline.id, event)} key={discipline.name} className="c-discipline">
                            <span className="name">{discipline.name}</span> - <span className="score">{disciplineScore(this.props.athlete.skillset, discipline.requirements)}</span>
                            <div style={this.state} className="element">
                            <p>{discipline.tags !== undefined ? discipline.tags.toString().replace(',', ', ') : ''}</p>
                            <p className="isIndividual">{discipline.isIndividual===true ? "Individual sport" : "Team sport"}</p>
                            <img src={discipline.photo}/>
                            </div>
                        </div>
                    )
                })}
            </div>
        </section>
    )
}

}

Answer 1

您需要一种方法来识别单击了哪个元素。

以下是一个例子：

export default class App extends React.Component {
  state = {
    opened: true,
    selected: ''
  };

  toggleHidden = key => {
    this.setState({ opened: !this.state.opened, selected: key });
  };

  render() {
    return (
      <div>
        {arr.map((s, i) => (
          <div key={i}>
            <p>{s}</p>
            <button onClick={() => this.toggleHidden(i)}>Toggle</button>
            {!this.state.opened && this.state.selected === i && <h1>{s}</h1>}
          </div>
        ))}
      </div>
    );
  }
}

数组元素上的onClick事件javascript React

1 个答案: