Formik handleChange - используйте крючки - PullRequest
Новая
       86

Formik handleChange - используйте крючки

0 голосов
/ 29 мая 2020

перед установкой 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 во входные данные, db вернет 2 машины honda, hyundai

Я читал, что Formik может упростить большую часть настройку формы в React, поэтому я загрузил ее, однако опора handleChange от Formik хочет отслеживать 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 в formik values prop?

1 Ответ

0 голосов
/ 29 июня 2020

вы можете использовать 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>
...