Question

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

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

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

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

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

Answer 2

问题是你有一个所有组件的标志。相反，每个项目都应该有1个标记。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

向item对象添加一个属性，并使用该属性检查item是readMore还是read-less。

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

React toggle分别为每个项目读取更多内容

3 个答案: