Question

这实际上不是一个问题，而是我分享使用此库修剪字段值的技术。我读过我在Stack Exchange和其他地方发现的每一篇文章，但找不到完整的解决方案。我花了太多时间和一些反复试验才弄明白。

使用redux-form，您必须使用更改操作创建器将字段值重置为修剪值。困难的部分是在正确的条件下在代码中找到正确的位置来进行修剪并触发动作。我尝试了redux-form中包含的normalize方法。不，我尝试在字段上修改自定义onChange和onBlur处理程序。没有。大多数尝试过的解决方案导致无法在现场打字。我以为我可以在自定义onBlur处理程序中完成它，但是如果我从该处理程序中调度了redux-form更改操作，则更改操作首先更新状态，然后是挂起的模糊操作，并将覆盖修剪后的值该州的原始价值。

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

1）导入redux-form更改操作并向props添加自定义方法以发送它。

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

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方法有点难看，但它现在有效。它的要点是，对于要进行修剪的每个场，如果该场具有焦点，则无需执行任何操作。如果字段不具有焦点，并且应该对其进行修剪，则使用props中的自定义调度程序触发动作以更新redux表单中的该字段。

也许不应该花这么长时间，但我发现这个解决方案并不容易理解。也许这种方法可以节省其他人一些时间。我也愿意接受＆＃34;呃，为什么你不这样做的反馈！＆＃34;如果有我遗漏的东西。

admin-on-rest，redux-form和修剪字段值

0 个答案: