防止 React Native Modal 在关闭时将焦点返回到 TextInput

Question

我有一种情况，我正在使用 TextInput 的 onFocus 方法（称之为“main TextInput”）打开模态框。我遇到的问题是当我专注于 Modal 内的单独 TextInput（称之为“Modal TextInput”）然后关闭 Modal，主要 TextInput 的 onFocus 方法再次开火并重新打开模式。如果此时我关闭模态框而不关注模态框 TextInput，主 TextInput 不会丢失并重新获得焦点，因此模态框不会重新打开。

就好像主要 TextInput 失去对模态 TextInput 的关注，然后通过以下捕获关闭模态 returns 对主要 TextInput 的关注。据我所知，主要 TextInput 实际上并没有失去焦点，因为我为 onBlur 方法创建了一个简单的控制台日志测试，但它没有触发。

我见过一个解决方案，其中有人在实际打开模态框之前使用模糊方法，但他们使用按钮打开模态框，因此他们有一个 onPress 可以用来执行多个命令而我使用的是 onFocus，因此模式会立即打开。

我尝试在调用 Modal 的 onDismiss 方法时使用 useRef 挂钩来关注“不可见”TextInput，但行为是相同的。奇怪的是使用控制台日志（是的，我是业余爱好者）来查看事件的顺序显示主要 TextInput 的 onFocus 在模态 onDismiss.[= 之前再次发生30=]

如果有人知道防止这种行为的方法，我将不胜感激。

Answer 1

这是一种选择。

设置一个新的状态来跟踪模式是否应该打开。如果您使用钩子：

// screen body
const [modalShouldOpen, setModalShouldOpen] = useState(true);

您可能已经有了一个跟踪模态是否打开的状态：

const [isModalOpen, setIsModalOpen] = useState(false);

当您在主文本输入的 onFocus 回调中调用 setIsModalOpen(true) 时，也会调用 setModalShouldOpen(false)。还必须更改回调以仅在应该打开时打开模式。

const onFocus = () => {
  if (!modalShouldOpen) return;

  setIsModalOpen(true);
  setModalShouldOpen(false);
}

然后您可以在主TextInput 的onBlur 方法中将modalShouldOpen 设置回true。下面是完整的伪代码。

export default function MainScreen() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalShouldOpen, setModalShouldOpen] = useState(true);

  const onMainTextInputFocus = () => {
    if (!modalShouldOpen) return;

    setIsModalOpen(true);
    setModalShouldOpen(false);
  }

  const onMainTextInputBlur = () => {
    setModalShouldOpen(true);
  }

  return (
    <View style={styles.container}>
      <TextInput onFocus={onMainTextInputFocus} onBlur={onMainInputBlur} />
    
      <Modal show={isModalOpen}>
        ...
      </Modal>
    </View>
  );
}

防止 React Native Modal 在关闭时将焦点返回到 TextInput

Prevent React Native Modal from returning focus to TextInput when closed

focus

modal-dialog

onfocus

react-native