React Native点击TouchableOpacity无法切换TextInput可编辑状态如何解决

核心错误点 #

• TouchableOpacity的onPress回调中没有正确执行textEdit函数，仅写了函数引用没有加调用括号，点击时逻辑不会运行，状态自然无法更新
• 现有布尔值切换逻辑可优化，避免潜在闭包问题

修正代码 #

状态与事件逻辑部分 #

const [change, setChange] = useState(true);
const [text, setText] = useState("");

const textEdit = () => {
  // 函数式更新可以保证拿到最新的状态值，写法也更简洁
  setChange(prev => !prev);
};

组件渲染部分 #

<TextInput
  style={{ width: "100%", height: 100, backgroundColor: "gray" }}
  placeholder={"write something"}
  onChangeText={(text) => setText(text)}
  editable={change}
>
  <Text>adderess</Text>
</TextInput>

<TouchableOpacity
  // 直接将textEdit作为回调传入即可，不需要额外包裹一层空箭头函数
  onPress={textEdit}
>
  <Text style={{ color: "blue" }}>Change</Text>
</TouchableOpacity>

补充说明 #

你原来的onPress写法onPress={() => { textEdit; }}等价于定义了一个没有任何有效执行逻辑的回调函数，单独把函数名写在代码块里不会触发执行。如果要保留箭头函数包裹的写法，需要改成onPress={() => textEdit()}，不过没有额外参数需要传递的情况下，直接把函数传入onPress是更简洁的写法。

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