Javascript ReactJS：在模糊上保存输入值，而不是在每个关键点笔划上保存输入值

我创建了一个React视图，比如说

MyView

，它有两个文本输入，其初始值将由从数据库读取的父级传递

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

考虑到DB save操作很繁重，您不应该经常这样做。因此，我决定在输入框上收听

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

但这也不适用于“重置/清除”按钮单击，尽管视图被重新渲染，但创建视图后，

defaultValue

不会更新

第三种方法：

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

因此，我最终添加了一个

onChange

监听器，但作为no-op

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

现在，这又不起作用了。原因是，即使我临时将值保存到state，并且在props中将状态重置为初始值，也会调用此函数

---

一些ReactJS专家能帮我处理我的用例吗？

您仍然需要

onChange

来帮助您设置两个url输入的状态

onBlur

仅用于触发保存，它是两个用于不同目的的不同事件

因为A&B值是从父组件传下来的

MyView

的父组件应向下传递

此.state.values

和设置状态的函数

如果所有内容都在单个组件中，请参阅此代码段。您应该能够将

handleChange

功能移动到其父组件

类应用程序扩展了React.Component{
状态={
价值观：{
A:“”，
B:'
}
}
handleChange=e=>{
这是我的国家({
价值观：{
…这个州的价值观，
[e.target.name]：e.target.value
})
}
车把LUR=e=>{
如果（e.target.name=='A'）{
警报（`Saving A:${this.state.values.A}`）
}
如果（e.target.name=='B'）{
警报（`Saving B:${this.state.values.B}`）
}
}
render（）{
返回(
价值A
B值
)
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
)；

---

基于onChange的工作原理，我建议您看看以下内容：

导航到标题：等待键入停止

---

希望它能以某种方式引导您实现您想要的目标。

根据对杨立仁解决方案的评论，我将处理

组件diddupdate

上的道具状态协调，在那里您可以获得旧的

状态和
道具
。这样您就可以确定
这是如何更新的。道具
是如何更新的，并按此操作的gly.当
props
中的值与
state
或
oldProps
不匹配时，更新是外部的，您应该覆盖状态中未保存的更改

代码应该是这样的

componentDidUpdate(prevProps) {

if (this.props.values !== prevProps.values && this.props.values !== this.state.values) {
  this.setState({values:this.props.values});
   }
}

如果您使用此方法，还可以使输入
不受控制
并通过引用更新其值。这解决了
受控
输入的一些不可靠性问题，例如，键入十进制逗号时，
type='number'
将
未定义
返回为其值。您仍然需要存储该值
onChange
但仅将其保存为
onBlur
并在
componentDidUpdate
中处理状态属性对账作为一些第一信息，onChange是否起作用？当它发生变化时是否将数据发送到数据库？@Craws如果我使用
onBlur
而不是
onBlur
，是的，它完全起作用，但我不起作用希望在每次按键时启动数据库保存。谢谢@liren yeo。我的用例是从
this.props
读取初始值，但同时反映
this.props
内部或外部发生的任何新更改。@lazyvab我可以知道是什么触发了
this.props.values
的更改吗？用户不能吗在URL输入中键入？您可以假设
this.props.values
从3个位置更改-第一个在用户输入时更改，第二个在重置按钮单击时更改，第三个从其他服务外部更改。但是在外部更改的情况下，父容器负责重新呈现视图，如：
ReactDOM.render（React.createElement（MyView，{..props}
@lazyvab发生外部更改时，是否仍要立即触发保存？通过外部更改，我的意思是有一个并行组件已将值保存在DB中，我希望在该视图中反映这些更新。因此，无需进一步保存。只需使用新值查看渲染。感谢@craws共享它。是的，可以有一种方法，我不使用
onBlur
，而是使用基于时间的
onChange
。但是对于这个特定的用例，我不希望它像在我的实际代码中那样基于时间，还有其他的输入，比如textarea，它将包含一个长文本，我无法触发多个DB save请求解决方案是为每个输入字段设置状态，并在一次更改后触发设置状态。在所有状态都有效/notNull后允许数据库请求。您能否帮助我提供一些代码片段或示例？您是否要求触发一个虚拟
setState
，这相当于重新渲染？如果您得到了我，基本问题是数值是从道具中读取的，但会在状态中更新，而道具会在稍后阶段更新。太棒了！谢谢@diego。这就是我要找的。：）
componentDidUpdate(prevProps) {

if (this.props.values !== prevProps.values && this.props.values !== this.state.values) {
  this.setState({values:this.props.values});
   }
}