Question

我列出了作为React组件显示的照片。最初显示的各个列表项带有+符号。我尝试实现的行为是单击特定列表项，符号更改为-，一旦单击其他列表项，第一个将恢复为+和当前一个人去-。这是我的渲染代码，

render() {
    let classes = "glyphicon add-icon " + (this.state.glyphClass ? "glyphicon-plus" : "glyphicon-minus");
    return (
      <div className="row">

          <ul className="list-inline">
            {this.props.images.map(function (image) {

              return (<li key={image.id}>
                          <a href="#" onClick={this.getMediaId} data-id={image.id} data-class={image.src} data-owner={image.owner}>
                            <div className="img-wrapper">
                              <div className="img" style={{backgroundImage: `url(${image.src})`}}></div>
                                <div className="img-selector">
                                    <span className={classes} id="plus-icon" aria-hidden="true"></span>
                                </div>
                            </div>
                          </a>
                      </li>);
            }, this)}

          </ul>
        </div>

    );
  }

这是构造函数，

constructor(props){
    super(props);
    this.getMediaId = this.getMediaId.bind(this);
    this.state = { glyphClass : true };
  }

这是执行切换的方法，

getMediaId(event){
    event.preventDefault();
    this.setState({
      glyphClass: !this.state.glyphClass

    });
    console.log(this.state.glyphClass);
    ....
  }

我现在获得的行为是onClick on任何列表项，所有列表项都切换到-，然后在后续点击中切换到+。我真的很感激帮助解决这个问题。

Answer 1

您可以在州内拥有selectedItem。

constructor(props){
    super(props);
    this.getMediaId = this.getMediaId.bind(this);
    this.state = { selectedItem : null };
}

然后在获取媒体设置中单击selectedItem的id。

getMediaId(id){
    this.setState({
      selectedItem: id
    });
}

然后你可以在渲染列表时检查id。如果selectedItem具有相同的列表ID，则呈现- else render render +。

render() {
return (
  <div className="row">

      <ul className="list-inline">
        {this.props.images.map(function (image) {

          const classes = this.state.selectedItem === image.id ? 'glyphicon add-icon glyphicon-minus' : 'glyphicon add-icon glyphicon-plus';

          return (<li key={image.id}>
                      <a href="#" onClick={(event) => {event.preventDefault(); this.getMediaId(image.id); }} data-id={image.id} data-class={image.src} data-owner={image.owner}>
                        <div className="img-wrapper">
                          <div className="img" style={{backgroundImage: `url(${image.src})`}}></div>
                            <div className="img-selector">
                                <span className={classes} id="plus-icon" aria-hidden="true"></span>
                            </div>
                        </div>
                      </a>
                  </li>);
        }, this)}

      </ul>
    </div>

);
}

将CSS切换为React中li项的状态

1 个答案: