Javascript 反应点击法

我正在尝试用react制作一个手风琴应用程序，我有来自API的数据，我有应用程序的基本轮廓，但我不确定如何处理手风琴上的点击

这是我的代码：

这是我设置数据的地方

App.js

class App extends Component {
  constructor(){
    super();
    this.state = {
      myData: {}
    };
  }

  componentDidMount() {
    axios.get(linkToApi)
      .then(responseData => {
        this.setState({ mydata: responseData.data });
      })
      .catch(error => {
        console.log("Porblem getting data", error);
      });
  }

  render() {
    return (
      <div className="App">
        <Accordion data={this.state.myData} />
      </div>
    );
  }
}

export default App;

手风琴

const Accordion = props => {
   let accordionElements = Object.keys(props.data).map(function(keyName, keyIndex) {
     return <AccordionElement
            {...props.data[keyName]}
            key={props.data[keyName].id}
          />;
 })


return (
   <ul className="accordion">
     {accordionElements}
   </ul>
 );
 }
 export default Accordion;

手风琴元素

const AccordionElement = props => {

 const handleOnClick = (e) => {
   e.preventDefault();
   //
 }

 return (
   <li style={listItemStyle} onClick={handleOnClick}>
     <h1 data={props}>{ props.name }</h1>
     <ul style={descriptionStyle}>
       <li>Description: { props.description }</li>
     </ul>
   </li>
 );

}

export default AccordionElement;

---

我想能够显示或隐藏标题下的描述时，点击。我真的不知道该怎么做，有什么想法吗？

如果描述在给定时间可见，我会使用状态来管理。比如说：

class AccordionElement extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      open: false
    }
  }

  const handleOnClick = (e) => {
    e.preventDefault();
    this.setState({ open: !this.state.open });
  }

  renderDescription() {
    const description = (
      <ul style={descriptionStyle}>
        <li>Description: { props.description }</li>
      </ul>
    );
    return this.state.open ? description : null;
}

  return (
    <li style={listItemStyle} onClick={handleOnClick}>
      <h1 data={props}>{ props.name }</h1>
      {this.renderDescription()} 
    </li>
  );

}

export default AccordionElement;

---

setOpenStatusid函数作为道具传递给AccordionElement，然后在click处理程序上调用它。这将在myData状态数组中查找ID并切换打开布尔值，然后将其他打开布尔值更改为false，因此只有单击的一个布尔值才能为true。链接。

如果有其他方法，应用程序此部分的可能副本无法访问状态？此外，我还更新了问题以显示更多的代码。是的，我意识到，在您不能对您声明的组件使用状态之后。加载每个数据对象后，您可以在其上添加一个“打开”属性，然后将一个函数从App传递到AccordionElement，从而更改给定对象的打开属性？我现在已经下班了，但我可以在我回到笔记本电脑前1小时写一个解决方案。你必须在某个地方管理状态，所以只需使用上面的答案作为示例，将其放置在AccordionElement或Accordion中。我认为手风琴是保存它的最好地方，因为如果你想一次只打开一个，你可以很容易地关闭其他的。为此，您必须将其中一个作为React类，而不是纯函数。您可以通过redux通过全局状态对其进行管理，并将这两个组件保持一致is@ragebunny今晚试图在仍然使用无状态组件的情况下解决这个问题；这很难。我认为至少有一种成分可能是协调的，所以你可以按照Max的建议去做，如果可能的话，你应该切换到正常的React.Component，然后从那里开始。无状态组件很好，但不能设置状态或使用组件生命周期方法是非常有限的，在我看来，在这种情况下是不合适的。我可能会在某个时候再尝试一次，但没有承诺。@ragebunny示例更新为一个有希望工作的示例。让我知道它是否有效。

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      myData: []
    };
    this.setOpenStatus = this.setOpenStatus.bind(this);
  }

  componentDidMount() {
    // this would be inside the API call
        const myData = [
        {
        id: 1,
        name: 'Item 1',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius metus tellus, eu tincidunt est viverra vitae. Fusce et mollis libero.'
      }, {
        id: 2,
        name: 'Item 2',
        description: 'Ut interdum ut justo ac euismod. Phasellus vitae pellentesque lectus, et cursus erat. Suspendisse eget risus gravida tellus rutrum gravida et vitae felis.'
      }, {
        id: 3,
        name: 'Item 2',
        description: ' Cras euismod massa eu mi consequat mollis. Sed aliquam tellus sed sem dictum feugiat. Nullam pretium purus sed ipsum pharetra luctus.'
      }
    ];
    myData.forEach(item => {
        item.open = false;
    });
    this.setState({ myData });
  }

  setOpenStatus(id) {
    console.log(this.state);
    const myData = this.state.myData;
    myData.forEach(item => {
        if (item.id == id) {
        item.open = !item.open;
      } else {
        item.open = false;
      }
    });
    this.setState({ myData });
  }

  render() {
    return (
      <div className="App">
        <Accordion data={this.state.myData} setOpenStatus={this.setOpenStatus} />
      </div>
    );
  }
}

const Accordion = props => {
   let accordionElements = [];
   const {data} = props;
   if (data && data.length > 0) {
     data.forEach(item => {
       console.log('props', item);
       accordionElements.push(<AccordionElement
              {...item}
              setOpenStatus={props.setOpenStatus}
              key={item.id}
            />);
     });
   }


return (
   <ul className="accordion">
     {accordionElements}
   </ul>
 );
 }

const AccordionElement = props => {

 const handleOnClick = (e) => {
   e.preventDefault();
     props.setOpenStatus(props.id);
 }

 const renderDescription = () => {
    return props.open ? props.description : null;
 }

 return (
   <li onClick={handleOnClick}>
     <h1>{ props.name }</h1>
     <span>{ renderDescription() }</span>
   </li>
 );

}