如何阻止onChangeText事件读取placeholder默认值？

你可以通过以下两个关键修改解决这个问题：

• 将TextInput设置为受控组件，明确绑定状态到输入框的value属性，避免不受控场景下的异常赋值
• 在状态更新函数里过滤掉placeholder的值，防止它被存入useState

修改后的代码如下：

function Rest(props) {
  const [Qrcode, setQrCode] = useState("");

  function SaveQrcode(enteredKey) {
    // 过滤掉placeholder的值，仅更新用户实际输入的内容
    if (enteredKey !== props.qrcode) {
      setQrCode(enteredKey);
    }
  }

  // 绑定value属性，让输入框值与状态严格同步
  return <TextInput placeholder={props.qrcode} onChangeText={SaveQrcode} value={Qrcode} />;
}

export default Rest;

改动说明： #

1. 受控组件绑定：添加value={Qrcode}后，输入框的显示内容完全由Qrcode状态控制，从根源避免了组件初始化时意外触发onChangeText并传入placeholder值的情况。
2. 值过滤逻辑：即使出现异常场景传入placeholder值，判断逻辑会直接跳过状态更新，确保只有用户主动输入的内容才会存入Qrcode，不干扰你判断用户是否输入了内容。

内容的提问来源于stack exchange，提问作者tomtom