React Native: Proper way to handle huge forms-CodePudding

I have an application developed for internal users. The home page of the app has at least 30 input fields.

<TextInput onChangeText={onChangeNumber} value={number}/>

I have onchangeText for all the 30 inputs, in the future I might add more fields. I don't think adding onchange to all the fields is the best way to do it. How can I optimize the approach? Are there any 3rd party packages where it doesn't re-render for every input change and only captures data on submit?

CodePudding user response：

Try using onEndEditing, as per docs:

onEndEditing Callback that is called when text input ends.

So just changing to <TextInput onEndEditing={onChangeNumber} value={number}/> should do

There are a few other alternatives on the docs, you might check to see the one that fits you better.

https://reactnative.dev/docs/textinput#onendediting

CodePudding user response：

the way I handle large forms is this, Store your form data in an object using useState like this,

const [formData, setFormData] = useState({name: "", age:""})

you can pass "onChangeText" like this,

<TextInput
   value={formData.name}
   onChangeText={value => setFormData(prev => { return { ...prev, name: value } })}
/>

I would suggest creating a separate component for "TextInput", so you can also handle validations in it.

CodePudding user response：

You should try formik yup.

I am using it in several projects and this is the best way to manage little and big forms!