在 React Redux 的输入字段中渲染状态值，使值不可更改答案

【问题标题】：Rendering the state value in the input field in React Redux makes the value unchangable在 React Redux 的输入字段中渲染状态值，使值不可更改
【发布时间】：2018-07-14 14:32:21
【问题描述】：

我正在使用 React 和 Redux 开发一个 Web 应用程序。我是 React 和 Redux 的新手。现在，我在使用 React 和 Redux 时遇到了问题。问题是当我使用状态值设置字段的值时，我无法更改输入字段的值。

在我的组件中，我有一个名为 event 的属性，它处于来自 connect 的状态。

function mapStateToProps(state)
{
    return {
        submittingForm : state.editEvent.submittingForm,
        formErrors : state.editEvent.formErrors,
        event: state.editEvent.event,
    };
}

如您所见，事件归档来自减速器。在我的组件中，我可以像这样检索事件。

this.props.event.name

现在，我想做的是在编辑事件时，我喜欢在输入字段中维护事件的值。

因此，我在输入字段中渲染状态值是这样的。

<TextField
      name="location"
      label="Location"
      value={this.props.event? this.props.event.location: ""} />

它正在维护输入字段中的值。但问题是我现在无法更改输入字段。我可以专注于文本输入字段，但是当我使用键盘输入任何内容时，值不会改变，只是继续显示状态值。我该如何解决这个问题？

【问题讨论】：

你在哪里听输入法？
您需要在您的TextField 组件中设置一个onChange 事件，该事件调度一个动作以更新适当的reducer 或修改组件的本地状态。
@Dez 谢谢你的建议。这是令人讨厌的模式（Redux）。
嗨，它正在工作。但这很慢。当我在文本字段中输入时，我可以看到滞后，因为我认为 react 正在不断更新 DOM。请问有更好的方法吗？

标签： javascript reactjs redux react-state-management

【解决方案1】：

如果速度很慢，我会使用 debounce 之类的函数（参见此处：https://lodash.com/docs/#debounce）。本质上，当你有一组经常发生的事件，并且你想调用某个函数时，它很有用，只有在自上一个事件后经过一定的超时时间。

因此，您可以在用户完成输入后 300-500 毫秒后才发出新事件，而不是每次更改时发出新事件。这看起来像是将所有更改批处理到单个更新中。如果这对您的问题来说是可以接受的，那么您可以这样做：

var debouncedOnChange = _.debounce(current_onChange_method, 300 or another time in ms);

然后在<TextField> 中将onChange 设置为debouncedOnChange。

【讨论】：