Question

我从服务器获取一些数据以填充项目列表，我想更改所单击项目的类。但是，由于每个组件的状态都是单数，因此它会更新每个项目的类。如何限制它仅限于点击的项目？代码如下。感谢。

let Item = React.createClass({
  getInitialState() {
    return { isItemOpen: false };
  },

  handleClick() {
   this.setState({ isItemOpen: !this.state.isItemOpen });
  },

  render() {
    let items = this.props.data.map((item) => {
      let itemClass = this.state.isItemOpen ? 'video-item open' : 'video-item';

      return (
          <article className={ itemClass } onClick={ this.handleClick }>
            <h1>{item.title}</h1>
            <p>{item.content}</p>
          </article>
      )
    });

    return (
      <div className="video-items">
        {videoItems}
      </div>
    )
  }
});

Answer 1

更好的策略可能是从点击的项目中保留id或title（某些唯一值）。然后保持项id处于状态，而不是在循环期间无法区分的布尔值。这样的事情对你有用：

let Item = React.createClass({
  getInitialState() {
    return { itemOpened: -1 };
  },

  handleClick(id) {
   this.setState({ itemOpened: id });
  },

  render() {
    let items = this.props.data.map((item) => {
      let itemClass = (this.state.itemOpened === item.id) ? 'video-item open' : 'video-item';

      return (
          <article className={ itemClass } onClick={ this.handleClick.bind(this, item.id) }>
            <h1>{item.title}</h1>
            <p>{item.content}</p>
          </article>
      )
    });

    return (
      <div className="video-items">
        {items}
      </div>
    )
  }
});

如何在React中为动态生成的项设置状态？

1 个答案: