分别为每个项目阅读更多内容

克里斯蒂安·穆斯卡卢

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

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

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

拉杰什

问题是您为所有组件设置了一个标志。相反，您应该为每个项目设置 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。