Does React.js has similar modifier like Vue.js "v-model.lazy"

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

The .lazy modifier in Vue.js will sync on DOM's change events instead of input. DOM's change events occur in a variety of situations depending on the form element used. A check box or radio button will trigger a change event when it’s clicked. An input text box will trigger a change event when it loses focus. Different browsers might not trigger change events on the same interactions.

However, React's onChange works differently than onChange in the DOM: it’s more like DOM's onInput. React's onChange fires when there is a change in any of the form’s input elements, in contrast to the DOM’s change event.

In React.js, if you'd like to have the similar behaviour as Vue.js' v-model.lazy, you need to bind the event handler to a different event.

In regard to your example, in Vue.js we have:

<!-- synced after "change" instead of "input" --><input v-model.lazy="msg" >

In React.js, we cannot use onChange, as the onChange handler is fired on every key stroke, not just when the whole input field has changed. React.js' onChange is not "lazy" :-) Instead, you can use its onBlur event:

class MyComponent extends React.Component {  constructor(props) {    super(props)    this.state = {      msg: ''    }  }  handleBlur(event) {    this.setState({msg: event.target.value});  }  render() {    return <div>      <input type="text" onBlur={this.handleBlur.bind(this)}/>      <p>Your message: {this.state.msg}</p>    </div>  }});

Here's the example on jsfiddle.

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)} />