休息时管理，redux形式和修剪字段值

Question

实际上，这不是一个问题，而是我分享了使用此库修剪字段值的技术。我已经阅读了在Stack Exchange和其他地方可以找到的每一篇帖子，也找不到完整的可行解决方案。我花了太多时间和一些反复试验才能弄清楚。

使用redux-form时，必须使用change action创建者将字段值重置为调整后的值。困难的部分是在正确的条件下在代码中找到正确的位置以进行修剪和触发动作。我尝试了redux-form附带的normalize方法。不。我尝试在字段上的自定义onChange和onBlur处理程序中进行修整。否。大多数尝试的解决方案导致无法在字段中键入空格。我以为可以在自定义onBlur处理程序中完成此操作，但是如果我从该处理程序中调度了Redux形式的更改操作，则更改操作会先更新状态，然后再执行待处理的模糊操作，并使用状态的原始值。

无论如何，这是我的解决方案。

1）导入redux-form更改操作，并将自定义方法添加到道具中以进行分派。

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处理程序。

在render方法中...

    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} />

3）检查是否需要修剪值componentDidUpdate（）并在必要时分派操作。

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

我的componentDidUpdate方法有些丑陋，但目前可以使用。要点是，对于要测试的每个领域，如果该领域都有重点，则无需执行任何操作。如果该字段并没有具有焦点，它应该被修剪，然后关火动作使用自定义调度员在道具更新了Redux形式领域。

也许不应该花那么长时间，但是我发现这种解决方案不容易解决。也许这种方法可以节省别人一些时间。我也很乐意接受“嗯，你为什么不这样做呢！”这样的反馈。如果有什么我想念的。