Question

我试图用反应制作一个手风琴应用程序，我有来自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;

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)函数作为道具传递给AccordionElement，然后在点击处理程序上调用。myData。这会在IEnumerable<int> ids = new [] {0, 42, -1};状态数组中找到ID并切换open boolean，然后将其他打开的布尔值更改为false，因此只有单击的可以为true。 jsfiddle链接。

反应onClick方法

1 个答案: