如何使用 useEffect 更改布尔值

Question

我有 2 个用户文本输入，称为搜索位置和坐标。我尝试在选中时使用复选框，以允许编辑搜索位置并禁用坐标输入，反之亦然，当未选中复选框时。

当我第一次运行代码时，我可以编辑搜索位置并且坐标被禁用。当我选中复选框时，文本输入工作正常，搜索位置被禁用并且坐标是可编辑的。但是，当我尝试取消选中该复选框时，搜索位置仍然处于禁用状态，并且仍然可以编辑坐标。

我尝试过使用 useEffect，但我对此不太熟悉，也不知道这是否是正确的方法。我对用户输入使用反应钩子形式，我对复选框使用反应本机元素。

代码：

export default function UserInput({ navigation }) {
const { handleSubmit, control } = useForm();
const [checkbox, setCheck] = useState(false);
const [edit1, setEdit1] = useState(true);
const [edit2, setEdit2] = useState(false);

const onSelect = () => {
if (!checkbox) {
  setEdit1(false);
  setEdit2(true);
}
setCheck(!checkbox);
};

return (
<View style={styles.formContainer}>
  <Text style={styles.text}>Distance(km)</Text>
  <Controller
    name="distance"
    control={control}
    rules={{
      required: true,
    }}
    render={({ field: { onChange, value } }) => (
      <TextInput
        placeholder="Enter your Distance"
        style={styles.input}
        onChangeText={onChange}
        value={value}
      />
    )}
  />

  <Text style={styles.text}>Search Location</Text>
  <Controller
    name="searchLocation"
    control={control}
    rules={{
      required: true,
    }}
    render={({ field: { onChange, value } }) => (
      <TextInput
        placeholder="Enter your Coordinates"
        style={styles.input}
        onChangeText={onChange}
        value={value}
        editable={edit1}
      />
    )}
  />
  <CheckBox
    center
    title="Current Location"
    checked={checkbox}
    onPress={onSelect}
  />

  <Text style={styles.text}>Coordinates</Text>
  <Controller
    name="coordinates"
    control={control}
    rules={{
      required: true,
    }}
    render={({ field: { onChange, value } }) => (
      <TextInput
        placeholder="Enter your Coordinates"
        style={styles.input}
        onChangeText={onChange}
        value={value}
        editable={edit2}
      />
    )}
  />
</View>
);
}

Answer 1

试试这个

const onSelect = () => {
if (!checkbox) {
  setEdit1(false);
  setEdit2(true);
} else {
  setEdit1(true);
  setEdit2(false);
}
setCheck(!checkbox);
};