javascript - React toggle 分别阅读每个项目的更多内容

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

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