Question

如何在其外部获取 array.map 的值？

例如：

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

Ouside我有类似的东西：

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

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

和Tinder一样，我有一系列要刷卡的卡，我映射，但是Like按钮不是卡的一部分。这样我就不会用卡片移动Like按钮，而是静态，我只是移动卡片的内容。所以我需要一种方法来从地图外部访问当前的项。该卡有文字和ID。下面的组件有一个Button，我需要点击它来传递当前卡的 item.ID 。

有没有办法将此项目设置为某个州？

谢谢。

Answer 1

一种解决方案是创建一个状态属性来保存正在显示的卡的ID，然后当单击该按钮时，您将获取该状态并对其执行某些操作。这是onClicks和divs的一个例子。

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是什么样的，但您需要在地图中绑定函数参数。

Array.map项目为状态

2 个答案: