Array.map项变为状态

Question

如何获取array.map之外的值？

例如：

array.map(index, item) => { return ( <Text>{item.ID}</Text> ) }

我有类似的东西：

<Button onPress={() => this.editItem(CURRENT_ITEM_ID)}></Button>

例如，其中CURRENT_ITEM_ID是卡上的当前项目。

像Tinder一样，我有一系列要刷卡的卡片，我正在映射 ，但是Like按钮不是Card的一部分。 这样，我不会随Card一起移动Like按钮，而是静态的，我只是在移动Card的内容。 因此，我需要一种从地图外部访问当前项目的方法。 卡上有文字和ID。 下面的组件有一个按钮，我需要单击以传递当前卡的item.ID。

有没有办法将此项目设置为状态？

谢谢。

Answer 1

一种解决方案是创建一个state属性，该属性保存显示的卡的ID，然后单击该按钮时，您将抓住该状态并对其进行处理。 这是onClicks和div的示例。

const arr = ['card1', 'card2', 'card3', 'card4'];

class App extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this);
    this.handleButtonClick = this.handleButtonClick.bind(this);
  }
  handleClick(index) {
    this.setState({ visibleCard: index });
  }
  handleButtonClick() {
    console.log('this.state.visibleCard', this.state.visibleCard);
    console.log('visibleCard', arr[this.state.visibleCard]);
  }
  render() {
    return (
      <div>
        {arr.map((card, i) => <div onClick={() => this.handleClick(i)}>{card}</div>)}
        <button onClick={this.handleButtonClick}>test</button>
      </div>
    )
  }
}

基本思想是将索引绑定到卡上。 然后，处理程序将该状态设置为visible（不确定它在您的情况下会是什么，因为它看起来像是一个移动应用程序）。 然后在按钮中，使用状态来获取可见卡并将数据传递给所需的其他功能。

Answer 2

我通常要做的是将事件绑定到map函数中。

array.map( (item, key) => {
    return (
        <div>
            <Text>{item.ID}</Text>
            <button onClick={this.editItem.bind(this, item.ID)}>Edit</button> 
        </div>
    )
}

不确定HTML的外观，但是您需要在地图中绑定函数参数。