Question

我有一个React / Redux应用程序，我正在尝试找出为受控输入字段构建正确的onChange事件的最佳方法。 React onChange触发onInput，所以我只在用户离开字段时才触发onBlur事件。我能想到的唯一方法就是实现我的＆＃34; onChange＆＃34;代码是将输入值设置为React状态。然后我可以将旧状态与来自Redux商店的新状态进行比较。但是，我不认为这是一个理想的解决方案，因为该值必须存储在React状态和Redux存储中。有没有办法为组件实现正确的onChange，同时只将值存储在Redux存储中？

/************Parent component************/
const mapStateToProps = (state) => {
    const fieldName = 'fieldName';
    const fieldData = formFieldSelector(fieldName)(state);

    return {
        fieldName,
        label: 'fieldName',
        value: fieldData.value
    }
};

const mapDispatchToProps = (dispatch) => ({
    onChangeEvent(fieldName, value) {
        dispatch(updateFieldValue(...))
    },
    onBlurEvent(fieldName, value) {
        dispatch(validateFormField(...)
    },
});

const MyFieldInput = connect(
    mapStateToProps,
    mapDispatchToProps
)(GenericInput);

/************Child Component************/
export default class GenericInput extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            value: ''
        };
    }

    handleOnBlur (e) {
        const value = e.target.value;

        if(this.props.onBlurEvent && (value !== this.state.value)) {
            this.props.onBlurEvent(this.props.fieldName, value)
        }

        this.setState({value});
    }

    render () {
        const {
            fieldName,
            label = '',
            value = '',
            inputType = 'text',
            onChangeEvent,
            onBlurEvent,
        } = this.props;
        const onChange = onChangeEvent ? (e) => onChangeEvent(fieldName, e.target.value) : function () {};

        return (
            <div>
                <label>{label}
                    <input name={fieldName} type={inputType} value={value} onChange={onChange} onBlur={this.handleOnBlur.bind(this)} />
                </label>
            </div>
        )
    }
}

Answer 1

删除onChange事件代码，并使用ref使用onBlur调度输入值。

所以你的输入看起来像这样：

<input name={fieldName} type={inputType} value={value} ref="fieldRef" onBlur={this.handleOnBlur.bind(this)} />

您将在handleOnBlur中传递值，如下所示：

this.props.onBlurEvent(this.props.fieldName, this.refs.fieldRef.value)

如何为受控制的React组件

1 个答案: