反应切换阅读更多关于每个项目的信息

Question

使用此代码，我可以切换Continue reading Read less ，但它适用于所有项目。

如何分别切换列表中的每个项目 ？

CODEPEN

JS

handleReadMoreClick(item_id) {
    console.log(item_id)
    this.setState({ readMore: !this.state.readMore })
}


render(....
  let { readMore } = this.state

    <span key={item.id}>
        <p>{item.title}</p>
        <p>{item.date}</p>
        <p className={readMore ? "read-more" : "read-less"}>{item.text}</p>
        <p onClick={() => { this.handleReadMoreClick(item.id) }}>
            {
                readMore ? 
                <strong>Show less</strong>:
                <strong>Continue reading</strong>
            }
        </p>
    </span>

CSS

    .read-more{
        height: auto;
    }
    .read-less{
        height: 60px;
        overflow: hidden;
    }

Answer 1

您的应用程序在Application组件中保持readMore状态，这意味着您的所有子项目都共享同一状态。 因此，切换一个将更改所有项目。

您应该将子项目提取到一个单独的组件中，并使它们都具有其唯一的状态，只有当您单击该特定项目时才可以切换该状态。

Answer 2

问题是您对所有组件都有一个标志。 相反，您应该为每个项目设置1个标志。

最好的方法是创建一个组件，然后遍历数据并创建组件列表。

 class ToggleText extends React.Component { constructor (props){ super(props); this.state={ readMore: false, } } handleReadMoreClick() { this.setState({ readMore: !this.state.readMore }) } render(){ return ( <span key={this.props.id}> <p>{this.props.title}</p> <p className={this.state.readMore ? "read-more" : "read-less"}>{this.props.text}</p> <p onClick={() => { this.handleReadMoreClick(this.props.id) }}> <b> { this.state.readMore ? 'Show less' : 'Continue reading' }</b> </p> </span> ) } } const Application = () => { let news_and_updates = [{"id": 1,"title": "Update: 1st Year Anniversary","date": "09/15/2016 02:36AM","text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum erat ut pulvinar tristique. Cras non dui volutpat, imperdiet arcu nec, commodo odio. Fusce sed consequat felis. Cras ut dapibus risus. Phasellus lectus odio, iaculis eu augue et, porttitor ultricies neque. Mauris dapibus ipsum arcu, non commodo ipsum fringilla a. Morbi gravida mi elementum pretium facilisis. Maecenas sit amet dui auctor, malesuada sapien id, ullamcorper tellus. Mauris condimentum posuere eros at commodo. Pellentesque ut tristique sem.","link": "https://www.nutaku.net/games/flower-knight-girl/news-updates/info/879" }, {"id": 2,"title": "Update: 1st Year Anniversary","date": "09/15/2016 02:36AM","text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum erat ut pulvinar tristique. Cras non dui volutpat, imperdiet arcu nec, commodo odio. Fusce sed consequat felis. Cras ut dapibus risus. Phasellus lectus odio, iaculis eu augue et, porttitor ultricies neque. Mauris dapibus ipsum arcu, non commodo ipsum fringilla a. Morbi gravida mi elementum pretium facilisis. Maecenas sit amet dui auctor, malesuada sapien id, ullamcorper tellus. Mauris condimentum posuere eros at commodo. Pellentesque ut tristique sem.","link": "https://www.nutaku.net/games/flower-knight-girl/news-updates/info/879" }, {"id": 3,"title": "Update: 1st Year Anniversary","date": "09/15/2016 02:36AM","text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum erat ut pulvinar tristique. Cras non dui volutpat, imperdiet arcu nec, commodo odio. Fusce sed consequat felis. Cras ut dapibus risus. Phasellus lectus odio, iaculis eu augue et, porttitor ultricies neque. Mauris dapibus ipsum arcu, non commodo ipsum fringilla a. Morbi gravida mi elementum pretium facilisis. Maecenas sit amet dui auctor, malesuada sapien id, ullamcorper tellus. Mauris condimentum posuere eros at commodo. Pellentesque ut tristique sem.","link": "https://www.nutaku.net/games/flower-knight-girl/news-updates/info/879" }] return ( <div> { news_and_updates.map((item) => <ToggleText {...item} /> ) } </div> ) } ReactDOM.render(<Application />, document.getElementById('app')); 

 .read-more{ height: auto; } .read-less{ height: 15px; overflow: hidden; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></app> 

Answer 3

将一个属性添加到item对象，并使用该属性检查item是readMore还是readless。

class Application extends React.Component {
  constructor(props){
    super(props)
    this.state={
      readMore: false,
      news_and_updates : [
      {
        "id": 1,
        "title": "Update: 1st Year Anniversary",
        "date": "09/15/2016 02:36AM",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum erat ut pulvinar tristique. Cras non dui volutpat, imperdiet arcu nec, commodo odio. Fusce sed consequat felis. Cras ut dapibus risus. Phasellus lectus odio, iaculis eu augue et, porttitor ultricies neque. Mauris dapibus ipsum arcu, non commodo ipsum fringilla a. Morbi gravida mi elementum pretium facilisis. Maecenas sit amet dui auctor, malesuada sapien id, ullamcorper tellus. Mauris condimentum posuere eros at commodo. Pellentesque ut tristique sem.",
        "link": "https://www.nutaku.net/games/flower-knight-girl/news-updates/info/879"
      },
      {
        "id": 2,
        "title": "Update: 1st Year Anniversary",
        "date": "09/15/2016 02:36AM",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum erat ut pulvinar tristique. Cras non dui volutpat, imperdiet arcu nec, commodo odio. Fusce sed consequat felis. Cras ut dapibus risus. Phasellus lectus odio, iaculis eu augue et, porttitor ultricies neque. Mauris dapibus ipsum arcu, non commodo ipsum fringilla a. Morbi gravida mi elementum pretium facilisis. Maecenas sit amet dui auctor, malesuada sapien id, ullamcorper tellus. Mauris condimentum posuere eros at commodo. Pellentesque ut tristique sem.",
        "link": "https://www.nutaku.net/games/flower-knight-girl/news-updates/info/879"
      },
      {
        "id": 3,
        "title": "Update: 1st Year Anniversary",
        "date": "09/15/2016 02:36AM",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum erat ut pulvinar tristique. Cras non dui volutpat, imperdiet arcu nec, commodo odio. Fusce sed consequat felis. Cras ut dapibus risus. Phasellus lectus odio, iaculis eu augue et, porttitor ultricies neque. Mauris dapibus ipsum arcu, non commodo ipsum fringilla a. Morbi gravida mi elementum pretium facilisis. Maecenas sit amet dui auctor, malesuada sapien id, ullamcorper tellus. Mauris condimentum posuere eros at commodo. Pellentesque ut tristique sem.",
        "link": "https://www.nutaku.net/games/flower-knight-girl/news-updates/info/879"
      }
    ]
    }
  }

  handleReadMoreClick(item_id) {
    console.log(item_id);
    const news_and_updates = JSON.parse(JSON.stringify(this.state.news_and_updates)); 
    news_and_updates[item_id].readMore = !news_and_updates[item_id].readMore;
    this.setState({ news_and_updates });
  }

  render() {
    return (

      <div>      
        {this.state.news_and_updates.map((item) => {
          console.log('readMore',item.readMore);
          return (
            <span key={item.id}>
              <p>{item.title}</p>
              <p className={item.readMore ? "read-more" : "read-less"}>{item.text}</p>
              <p onClick={() => { this.handleReadMoreClick(item.id) }}>
                {
                  item.readMore ?
                    <b>Show less</b> :
                    <b>Continue reading</b>
                }
              </p>
            </span>
          )
        })}
    </div>
    )
}
}

React.render(<Application />, document.getElementById('app'));