Javascript rest、redux表单和修剪字段值的管理

这其实不是一个问题，而是我使用这个库来分享修剪字段值的技术。我读过Stack Exchange和其他网站上关于此事的每一篇帖子，但找不到一个完整的工作解决方案。我花了太多的时间和反复试验才弄明白

对于redux表单，必须使用更改操作创建者将字段值重置为修剪值。困难的部分是在正确的条件下，在代码中找到正确的位置来进行修剪和启动操作。我尝试了redux表单中包含的规范化方法。没有。我试着在字段上修剪自定义onChange和onBlur处理程序。否。大多数尝试的解决方案导致无法在字段中键入空格。我认为我可以在自定义onBlur处理程序中完成，但如果我从该处理程序中调度redux表单更改操作，则更改操作首先更新状态，然后是挂起的模糊操作，并将使用状态中的原始值覆盖修剪后的值

不管怎样，这是我的解决方案

1） 导入redux表单更改操作，并将自定义方法添加到道具中以分派它

import { connect } from 'react-redux';
import { change } from 'redux-form';

const form = 'record-form';

function mapDispatchToProps(dispatch) {
    return {
        trimFieldValue: (field, value) => {
            dispatch(change(form, field, value.trim()));
        },
    };
}
const enhance = connect(null, mapDispatchToProps);
export default enhance(MyComponent);

2） 跟踪本地状态中的字段焦点，向需要修剪的字段添加onFocus和onBlur处理程序

在渲染方法中

    const handleBlur = (event) => {
        this.setState({
            hasFocus: null
        });
    }

    const handleFocus = (event) => {
        this.setState({
            hasFocus: event.target.name
        });
    }

在JSX中

<LongTextInput source="name" onBlur={handleBlur} onFocus={handleFocus} />
<LongTextInput source="description" onBlur={handleBlur} onFocus={handleFocus} />

我的componentDidUpdate方法有点难看，但它现在可以工作了。其要点是，对于要修剪的每个字段，如果该字段具有焦点，则无需执行任何操作。如果该字段没有焦点，并且应该对其进行修剪，则使用props中的自定义调度程序在redux表单中启动更新该字段的操作

---

也许我不该花这么长时间，但我发现这个解决方案并不容易找到。也许这种方法可以为其他人节省一些时间。如果我遗漏了什么，我也愿意接受类似“呃，你为什么不这么做！”这样的反馈。

你最好记录下你的发现！你可以做的是将它重新表述为一个问题，然后将你的解决方案粘贴为你自己问题的答案。忘了补充一点，如果你按照上面的步骤做，你甚至可以接受自己的答案。我唯一缺少的是

constform='recordform'-它来自哪里“记录表单”来自哪里？这是当前记录表单的标准AOR名称？是。”“记录表单”是redux表单使用的标准。或者我们也可以在表单值提交到服务器之前在数据提供程序端进行修剪。你觉得这个怎么样？
componentDidUpdate = (prevProps, prevState) => {
    if (this.state && this.state.name && this.state.hasFocus !== 'name' && (this.state.name !== this.state.name.trim())) {
        this.props.trimFieldValue('name', this.state.name);
    }
    if (this.state && this.state.description && this.state.hasFocus !== 'description' && (this.state.description !== this.state.description.trim())) {
        this.props.trimFieldValue('description', this.state.description);
    }
}