如何使用 useEffect 改变布尔值

Question

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

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

我尝试过使用 useEffect，但我对此不太熟悉，也不知道这是否是正确的方法。我正在为用户输入使用 React 挂钩表单，我为复选框使用 React 本机元素。

代码：

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);
};

如何使用 useEffect 改变布尔值

How to use useEffect to change boolean values

react-native

boolean

use-effect

react-hook-form

react-native-elements