Question

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

在我的组件中，我有一个名为event的属性，它的状态来自于这种连接。

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

如您所见，事件字段来自reducer。在我的组件中，我可以像这样检索事件。

this.props.event.name

现在，我想做的是编辑事件时，我想在输入字段中保留事件的值。

因此，我像这样在输入字段中呈现状态值。

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

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

Answer 1

如果速度很慢，我会使用类似debounce的功能（请参见此处：https://lodash.com/docs/#debounce）。从本质上讲，当您有多个经常发生的事件组并且要调用某个函数时，仅在自上一个事件发生后经过一定的超时后，此功能很有用。

因此，您不必在每次更改后都发出新事件，而只能在用户完成键入后300-500ms之后发出它。这看起来像将所有更改批处理到单个更新中。如果您的问题可以接受，请按照以下步骤进行操作：

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

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

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

1 个答案: