React Native 使用LabelInput提交后如何清除输入值

yv5phkfx  于 2023-01-31  发布在  React
关注(0)|答案(1)|浏览(224)

我创建了一个组件如下。
它允许用户输入他们的id并提交。
现在我想在提交后清除输入值。
如何落实?

const InputUserModal = ({ onConfirm }) => {
    const { register, control, handleSubmit, errors } = useForm();
    useEffect(() => {
        register({ name: 'userId' }, { required: true });
    }, [register]);
    return (
      <View>
          <Controller
            control={control}
            name="userId"
            defaultValue=""
            render={({ onChange, value }) => (
              <LabelInput
                label='user'
                iconSetting={{
                    name: 'user',
                    type: 'feather',
                }}
                onSubmitEditing={handleSubmit(onConfirm)}
                autoFocus
                onChangeText={v => onChange(v)}
                value={value}
              />
            )}
          />
      </View>
    );
};
uqcuzwp8

uqcuzwp81#

当你使用Formik时,它提供了reset函数,你可以将它作为onConfirm中的一个引用传递,如下所示:

const InputUserModal = ({ onConfirm }) => {
    const { register, control, handleSubmit, errors,resetForm } = useForm();
    useEffect(() => {
        register({ name: 'userId' }, { required: true });
    }, [register]);
    return (
      <View>
          <Controller
            control={control}
            name="userId"
            defaultValue=""
            render={({ onChange, value }) => (
              <LabelInput
                label='user'
                iconSetting={{
                    name: 'user',
                    type: 'feather',
                }}
                onSubmitEditing={handleSubmit(onConfirm(values,resetForm)}
                autoFocus
                onChangeText={v => onChange(v)}
                value={value}
              />
            )}
          />
      </View>
    );
};

假设您如下所示呈现此组件

const ParentComponent = ()=>{

    const handleOnConfirm =(values,resetForm)=>{

// Your function to submit  input  values to a server

// then  resetFormik Values

        resetForm()
    }

    return (
      <InputUserModal onConfirm={handleOnConfirm}/>
    )
}

相关问题