当同一个按钮位于不同的屏幕上时，如何为同一个按钮赋予两个不同的功能？

Question

第 1 页

我的 FlatList 如下所示。

    <FlatList
      ref={flatListRef}
      contentContainerStyle={{
        paddingBottom: 20,
      }}
      keyboardDismissMode={true}
      showsVerticalScrollIndicator={false}
      data={state}
      keyExtractor={(comment) => "" + comment.id}
      renderItem={renderComment}
    />

rendercomment 如下所示。如您所见，它会转到带有数据的 CommentRow 屏幕。

  const renderComment = ({ item: commentsRow }) => {
    const { comments } = getValues();
    return (
      <CommentRow
        commentsRow={commentsRow}
        photoId={route?.params?.photoId}
        updatedComments={comments}
        textRef={textRef}
      />
    );
  };

当我按下 confirm 按钮时，它可以 create 评论。

    <ConfirmButton onPress={handleSubmit(onValid)}>
      <ConfirmText>확인</ConfirmText>

第 2 页

如果我们转到 CommentRow 屏幕。如果我按编辑按钮，我想编辑我的评论。

      <TouchableOpacity onPress={onEditClick}>
        <WriteComment>수정</WriteComment>

但问题是当我按下 edit 按钮时，我需要使用 Comment 的确认按钮更改评论的有效负载。因此，当我按下确认按钮时，它不会 edit 评论，而是 create 评论。

如果这些组件在一页中，那么我可以使用 useState 来区分编辑按钮和确认按钮。但由于它们分别在两个屏幕中，我无法发送这是编辑按钮的信息 from page 2 to page 1。因为 flatlist 只传递数据 from page 1 to page 2.

我已经为这个问题苦苦挣扎了 1 周 :( 你有什么想法吗？

Answer 1

您可以将回调函数从页面 1 传递到页面 2，如下所示。

 const onUpdateComment = React.useCallback((newComment) => {
    // update state here for setting the new comment
 }, [whatever you need here])

 const renderComment = ({ item: commentsRow }) => {
    const { comments } = getValues();
    return (
      <CommentRow
        commentsRow={commentsRow}
        photoId={route?.params?.photoId}
        comments={comments}
        updateComments={onUpdateComment} // this has changed on page 1
        textRef={textRef}
      />
    );
  };

在第 2 页，您可以使用传递的回调函数。

const onEditClick = React.useCallback(() => {
  // do the other stuff
  updateComments(newComment) // this is the callback function passed in the updateComments prop of CommentRow in page 1
}, [whatever you need here])
<TouchableOpacity onPress={onEditClick}>

当同一个按钮位于不同的屏幕上时，如何为同一个按钮赋予两个不同的功能？

How to give two different function to the same button when it's located on different screen?

react-native

use-state

flatlist