Formik handleChange - 使用钩子

Question

在安装 Formik 之前，我的输入如下所示：

         const [search, setSearch] = useState('');
         ....

         <View style={styles.profileEditContainer__top}>
          <TextInput
            style={styles.profileEditContainer__form}
            autoCapitalize="none"
            placeholder="Enter what you want to create.."
            placeholderTextColor={Colors.formPlaceHolderDefault}
            name="search"
            type="search"
            value={search}
            onChangeText={(e) => setSearch(e)}
            autoCorrect={false}
            defaultValue={search}
          />
          <Button
            disabled={!search}
            title="Create"
            onPress={(e) => {
              createNewCar(e);
            }}
          />
        </View>

在 中onChangeText，我会将输入的每个字符设置为名为 的状态道具search。我输入的每一个键都会调用一个 API 来从数据库中获取一些数据。

例如：

如果我h输入，数据库将返回 2 辆汽车honda, hyundai

我读到 Formik 可以简化 React 中的很多表单设置，所以我下载了它，但是，handleChangeFormik 的 prop 想要跟踪values.search

         <Formik
          initialValues={{
            search,
          }}
          onSubmit={(values) => {
            console.log('values', values);
          }}>
          {({ handleChange, handleSubmit, values }) => (
            <View style={styles.profileEditContainer__top}>
              <TextInput
                style={styles.profileEditContainer__form}
                autoCapitalize="none"
                placeholder="Enter what you want to create.."
                placeholderTextColor={Colors.formPlaceHolderDefault}
                autoCorrect={false}
                value={values.search}
                onChangeText={(e) => {
                  handleChange(values.search);
                  setSearch(e);
                }}
              />
              <Button
                disabled={!search}
                title="Create"
                onPress={handleSubmit}
              />
            </View>
          )}
        </Formik>

现在我无法在表单中输入内容，因为value它指向values.search而不是像search原来那样。

问题

我如何射击setSearch并onChangeText添加search到 formikvalues道具中？

Answer 1

您可以使用setFieldValue('search', e.target.value)而不是handleChange() 将代码更改为以下内容：

<Formik
      initialValues={{
        search,
      }}
      onSubmit={(values) => {
        console.log('values', values);
      }}>
      {({ handleChange, handleSubmit, values, setFieldValue }) => (
        <View style={styles.profileEditContainer__top}>
          <TextInput
            style={styles.profileEditContainer__form}
            autoCapitalize="none"
            placeholder="Enter what you want to create.."
            placeholderTextColor={Colors.formPlaceHolderDefault}
            autoCorrect={false}
            value={values.search}
            onChangeText={(e) => {
              //handleChange(values.search);
              setFieldValue('search', e.target.value)

              setSearch(e);
            }}
          />
          <Button
            disabled={!search}
            title="Create"
            onPress={handleSubmit}
          />
        </View>
      )}
    </Formik>