小编laz*_*vab的帖子

我创建了一个 React View，比如说MyView，它有 2 个文本输入，其初始值将由从数据库读取的父级传递。

我还希望将更改后的值保存回数据库。因此，视图也传递了一个回调函数。

考虑到数据库保存操作很繁重，您不应该经常执行它。因此，我决定监听onBlur事件，而不是每次击键时调用的onChange输入框上的事件。onChange

第一种方法：

class MyView extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
              <input type="url" value={this.props.values.A}
                   onBlur={(evt)=>{this.props.saveValue('A', evt.target.value)}} />
              <input type="url" value={this.props.values.B}
                   onBlur={(evt)=>{this.props.saveValue('B', evt.target.value)}} />         

              <button type="button" onClick={this.props.resetValues}>Reset</button>
            </div>
        );
     }
}

但是，这不起作用，因为React强制受控输入（带有value属性）始终伴随onChange侦听器。

第二种方法：

因此，我尝试将这些输入设为uncontrolled. 也就是说，value使用 代替属性defaultValue。

<input type="url" defaultValue={this.props.values.A}
       onBlur={(evt)=>{this.props.saveValue('A', evt.target.value)}} />

但这也不起作用，因为单击重置/清除按钮时，尽管视图已重新渲染，但defaultValue创建视图后不会更新。

第三种方法：

所以，我最终添加了一个onChange侦听器，但作为无操作。

<input …