reactjs - 将带参数的回调传递给父组件

Question

我问的问题可能微不足道，但却困扰了我一段时间。

假设我们有一个渲染一些按钮的 CHILD 组件:

const Picker = ({ data, label, visible, cancelCallback, onPressCallback }) => {

  function renderRow (data) {
    return data.map((el) => {
      return (
        <TouchableOpacity 
          style={listViewItemContainer} 
          key={el.label}
          onPress={}
        >
          <Text style={listViewItem}> { el.label } </Text>
        </TouchableOpacity>
      );
    });
  }

  return (
    <Modal
      visible={visible}
      animationType="fade"
      onRequestClose={() => {}}
      transparent={true}
    >


          <View style={listViewContainerStyle}>
            { renderRow(data) }
          </View>


    </Modal>
  );
};

现在，当我按下其中一个按钮时，我想回调父按钮，但我想传递一些参数，例如按下的元素的标签。像这样的东西:

<TouchableOpacity 
  style={listViewItemContainer} 
  key={el.label}
  onPress={onPressCallback(el.label)} // onPressCallback is a Prop passed to the child
>
  <Text style={listViewItem}> { el.label } </Text>
</TouchableOpacity>

然后在父组件中处理逻辑。我该怎么做？

Answer 1

像这样。

   onPress={() => onPressCallback(el.label)}