Question

我想从我的组件中传递点击的searchItem的id。我的代码如下。

const searchResultList = props => (
  <View style={styles.container}>
    <ScrollView keyboardShouldPersistTaps="always">
      {props.itemList.map(item => (
        <SearchResultListItem
          key={item.id}
          imageSource={item.workoutImage}
          mainText={item.workoutName}
          subText={item.length + " |  " + item.difficulty}
          onItemPressed={props.onItemPressed}
        />
      ))}
    </ScrollView>
  </View>
);

当onItemPressed时，我想用prop.onItemPressed传递item.id。这是我的屏幕。

<SearchResultList
     itemList={this.props.searchedWorkouts}
     onItemPressed={id => alert(item.id)} //this.onLoadWorkoutDetailView()}
/>

我怎样才能做到这一点？我希望点击的itemId到我的主屏幕。

Answer 1

您需要制作添加功能。直截了当就是这样：

...
onItemPressed={() => props.onItemPressed(item.id)}
...

但是，从性能的角度来看，它不是一个好的解决方案。

更好的方法是创建一个方法并将所有项绑定到此方法。

class SearchResultList extends React.PureComponent {
  constructor(props) {
    super(props);

    const {itemsList} = props;
    this._onPressHandlers = {};

    for (let {id} for itemsList) {
      this._onPressHandlers[id] = this._onItemPress.bind(this, id);
    }
  }

  _onItemPress(id) {
    return this.props.onItemPressed(id);
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView keyboardShouldPersistTaps="always">
          {props.itemList.map(item => (
            <SearchResultListItem
              key={item.id}
              imageSource={item.workoutImage}
              mainText={item.workoutName}
              subText={item.length + " |  " + item.difficulty}
              onItemPressed={this._onPressHandlers[item.id]}
            />
          ))}
        </ScrollView>
      </View>
    );
  }
}

在这种情况下，不会在每个列表渲染上生成处理程序，也不会导致重新呈现SearchResultListItem组件。

显然，如果您希望更改itemsList道具，则需要在componendWillReceiveProps方法上重新绑定它。

传递参数与道具反应原生

1 个答案: