Javascript 如何更改输入字段值，使其保持不变'；是否每次更改时都要运行整个Redux状态更新周期？

我有一个组件，它有一个绑定到应用程序状态的输入字段，如下所示

import {updateTitle} from '../actions/sales';

class Sale extends Component {
  onTitleChange(event) {
    const {value} = event.target;
    const {id} = this.props;

    this.props.updateTitle(id, value);
  }

  render() {
    return (
      <input
        placeholder="The Title"
        value={this.props.title}
        onChange={::this.onTitleChange} />
    );
  }
}

export default connect(({sales}) => ({
  title: sales.title
}), {
  updateTitle
}))(Sale);

从“../actions/sales”导入{updateTitle}；
类销售扩展组件{
onTitleChange（事件）{
const{value}=event.target；
const{id}=this.props；
this.props.updateTitle（id，value）；
}
render（）{
返回(
);
}
}
导出默认连接（{sales}）=>({
标题：sales.title
}), {
更新
}))（出售）；

但在加价方面要重得多

一切都很好，只是当我尝试快速在该字段中键入内容时，浏览器会明显滞后，因为每次输入更改（这意味着每次按键）都会贯穿整个循环，从事件处理程序到动作创建者、实际动作、减速器、存储更新、组件道具更新和渲染。超慢的。有什么方法可以优化它吗

我错过了什么明显的东西吗

---

---

我尝试使用作为

onChange

prop值传递的去公告函数，但这样，应用程序状态根本不会更新。我还尝试使用组件级状态和设置状态以及应用程序级状态，但我认为这种方法与Redux的思想相矛盾，因此不应该使用。第一：尝试连接到更靠近输入组件的redux存储（这样就可以减少不受更改时的值更新影响的组件）

通常情况下，我们将中间值存储在父组件状态中，或者偶尔将该值刷新（如正常的去盎司）到redux存储，或者在onBlur之类的东西上执行该操作。因此，在每次更改时更新状态中的值，并偶尔将该值刷新到存储中。它需要更加小心地确保值同步，但这些是优化热路径的一些折衷办法。

可以使用React组件。受控输入将其值作为道具接收，并为值的每次更改触发事件处理程序。非受控控件将用户输入保持在本地状态，并触发事件处理程序进行更改

---

您的输入目前是受控的，但如果您希望使更改更本地化，为什么不使其不受控？然后，您可以在用户完成键入时在onBlur事件中调用updateTitle，或者在用户键入时取消onChange事件的抖动以减少调用updateTitle的频率。

只有在输入模糊且值已更改时才会触发

onChange

事件，而不是在“每次按键”时。不，每次更改都会触发它，即每次按键或在字段中进行的其他更改（例如，剪切或粘贴）。这是React事件，而不是DOM事件。那么也许你应该改用

onBlur

事件，这样就不会在每次击键时触发。当我想格式化这个输入字段的值时，问题就来了，比如说，使用

矩#format

。如果该字段的值为

02/16/2016

，并且我删除了最后一个字符，它将变为

02/16/0201

，光标将跳到末尾。人类完全不可能在那时改变一天或一个月。不幸的是，在这种情况下，

onBlur

没有帮助，因为要使用它，我必须将

value

prop更改为

defaultValue

，并手动跟踪更改。虽然在这个问题的范围内，您的回答非常有用。事实上，我最终使用了

onBlur

，但这不是万能药。是的，我发现使用组件级状态，即将组件设置为非受控状态，这不是一个坏主意，也绝对不是一种反模式。谢谢你的留言！