Question

所以，我有一张桌子，由一个tr和两个td组成。在一个td中有一个用户列表，在第二个用户列表中，每个用户都有描述。

      <tr>
        <td className='influencers'>
          <ul className='influencers-list'>
            {this.state.influencers.map(influencer =>
              <li key = {influencer.id}
                  className = 'influencers-list-item'
                  onClick={this.handleActive}
                  id = {influencer.id}>
                <p className='influencers-list-name'>{influencer.name}</p>
                <p className='influencers-list-data'>{influencer.created_at}</p>
                <p className='influencers-list-notes' >Notes</p>
              </li>)}
          </ul>
        </td>
        <td>
          <div className = {`to-dont-list__description`}>
            {this.state.influencers.map(influencer =>
              <div key = {influencer.id}  id={influencer.id}>
                <div>
                  <p className = 'to-dont-list__data'>{influencer.created_at}</p>
                  <img src = {influencer.image} className = 'to-dont-list__img'/>
                  <p className='to-dont-list__name'>{influencer.name}</p>
                  <p className='to-dont-list__quote'>{influencer.bio}</p>
                </div>
                <ul>
                  {/*{this.state.influencers.map(influencer =>*/}
                    {/*<li key={influencer.id}>*/}
                      {/*<p><span>{influencer.toDont.id}</span>{influencer.toDont.rule}</p>*/}
                    {/*</li>     */}
                  {/*)}*/}
                </ul>
              </div>)}
          </div>
        </td>
      </tr>

目前，我需要显示被点击的用户描述。我如何实现这一目标？因为我现在可以做的是点击列表中的任何用户，只显示第一个用户。

Answer 1

我希望我理解你在寻找什么...... 如果我这样做，我会尝试以下方法：

onClick={() => this.handleActive.bind(this)(influencer)}

和

handleActive() {
  // get the description (not sure where from, but you should know)
  // I assume that newDescription has set with this value
  const inf = {...influencer, description: newDescription);
  this.setState(prevState => ({
    influencers: [...prevState.influencers, influencer]
  }));
}

单击列表项

1 个答案: