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”按钮不是卡片的一部分。这样我不会用卡片移动 Like 按钮，而是静态的，我只是移动卡片的内容。所以我需要一种从地图外部访问当前 item 的方法。该卡具有文本和 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>
    )
  }
}

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

Answer 2

我通常做的是在地图函数中绑定事件。

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

不确定你的 HTML 是什么样的，但你需要在 map 中绑定函数参数。