javascript - react onClick 方法

Question

我正在尝试使用 React 制作一个 Accordion 应用程序，我有来自 API 的数据，并且我有该应用程序的基本轮廓，但我不确定如何处理 Accordion 上的点击。

这是我的代码:

这是我设置数据的地方

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;

Accordion .js

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;

AccordionElement.js

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;

我希望能够在单击标题时显示或隐藏其下方的说明。我不太确定我会如何解决这个问题，有什么想法吗？

Answer 1

我会使用状态来管理描述在给定时间是否可见。所以像这样:

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;

编辑:我已经解决了一些问题；现在应该可以按预期工作，将 Accordion 和 AccordionElement 保留为功能组件。代码如下:

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

}

setOpenStatus(id) 函数作为 props 传递给 AccordionElement，然后在点击处理程序上调用。这会在 myData 状态数组中找到 ID 并切换 open bool 值，然后将其他 open bool 值更改为 false，因此只有单击的那个可以为 true。 jsfiddle链接。