Question

在Vue.js中：

默认情况下，v-model在每次输入事件后将输入与数据同步（除了上面提到的IME组合）。您可以添加延迟修饰符，而不是在更改事件后同步：

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

反应是否具有相似的修饰符或功能？官方文档的哪一部分？

Answer 1

以下内容来自v-model的Vue文档：

虽然有点神奇，但v-model基本上是语法糖更新用户输入事件的数据

在React中，您可以收听任何输入事件（onChange，onClick等）并触发更新React Component state的函数。如果您想要传递数据，可以将其作为props传递给任何孩子。通过这种方式，我们可以使用输入事件更新数据。有关详细信息，请参阅React State和React Component and Props

Answer 2

Vue.js中的.lazy modifier将根据DOM的更改事件而不是输入进行同步。 DOM的更改事件在各种情况下都会发生，具体取决于所使用的表单元素。单击复选框或单选按钮将触发更改事件。输入文本框失去焦点时将触发更改事件。不同的浏览器可能不会在相同的交互上触发更改事件。

但是，React的onChange与DOM中的onChange的工作方式不同：它更像DOM的onInput。与DOM的change事件相比，React的onChange会在表单的任何输入元素发生更改时触发。

在React.js中，如果您想要具有与Vue.js'v-model.lazy类似的行为，则需要将事件处理程序绑定到另一个事件。

关于您的示例，在Vue.js中，我们有：

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

在React.js中，我们不能使用onChange，因为onChange处理程序会在每次击键时触发，而不仅是在整个输入字段发生更改时。 React.js的onChange不是“懒惰的” :-)相反，您可以使用其onBlur事件：

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是jsfiddle上的示例。

Answer 3

onChange （在React中）将完全执行vue模型在VueJS中的作用。

Vue <input type="text" v-model="record" />

反应<input type="text" name="record" onChange={e => setRecord(e.target.value)} />

您可以在输入字段上使用 onBlur 事件，以实现类似于VueJS中的v-model.lazy的功能。

Vue <input type="text" v-model.lazy="record" />

反应<input type="text" name="record" onBlur={e => setRecord(e.target.value)} />

React.js是否有类似Vue.js“v-model.lazy”的修饰符

3 个答案: