Does React.js has similar modifier like Vue.js "v-model.lazy"
onChange (in React) will do exactly what v-model do in VueJS.
Vue <input type="text" v-model="record" />
React <input type="text" name="record" onChange={e => setRecord(e.target.value)} />
You can use onBlur event on input field in order to achieve functionality similar to v-model.lazy in VueJS.
Vue <input type="text" v-model.lazy="record" />
React <input type="text" name="record" onBlur={e => setRecord(e.target.value)} />
The following is from Vue docs for v-model
:
Although a bit magical, v-model is essentially syntax sugar for updating data on user input events
In React, you can listen to any input event ( onChange
, onClick
, etc. ) and trigger a function that updates the React Component's state
. If you want to pass the data down, you can pass it as props
to any children. In this way we can keep data updated with input events. For more info, see React State and React Component and Props