Question

我有一个Details.js redux-smart组件，其格式如下：

class Details extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <form className='form'>
                <NumberInput label='Field1:' name='Field1' value={this.props.editedGroup.field1} changeHandler={this.props.inputChangeHandler.bind(null, 'FIELD1_CHANGED')} />
                <NumberInput label='Field2:' name='Field2' value={this.props.editedGroup.field2} changeHandler={this.props.inputChangeHandler.bind(null, 'FIELD2_CHANGED')} />
                <NumberInput label='Field3:' name='Field3' value={this.props.editedGroup.field3} changeHandler={this.props.inputChangeHandler.bind(null, 'FIELD3_CHANGED')} />
                <TextInput label='Field4:' name='Field4' value={this.props.editedGroup.field4} changeHandler={this.props.inputChangeHandler.bind(null, 'FIELD4_CHANGED')} />
                <TextInput label='Field5:' name='Field5' value={this.props.editedGroup.field5} changeHandler={this.props.inputChangeHandler.bind(null, 'FIELD5_CHANGED')} />
            </form>
        );
    }
}

function mapStateToProps(state) {
    return {
        editedGroup: state.editedGroup
    }
}

function mapDispatchToProps(dispatch) {
    return {
        inputChangeHandler: function(type, data) {
            dispatch(formChange(type, data));
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Details);

我的行动显然很简单：

export function formChange(type, event) {
    return {
        type: type,
        data: event.target.value
    };
}

这是我的减速机：

var initialStateForEditedGroup = {
    field1: '',
    field2: '',
    field3: '',
    field4: '',
    field5: ''
};
function editedGroup(state = initialStateForEditedGroup, action) {
    switch (action.type) {
        case "FIELD1_CHANGED":
            return Object.assign({}, state, {field1: action.data});
        case "FIELD2_CHANGED":
            return Object.assign({}, state, {field2: action.data});
        case "FIELD3_CHANGED":
            return Object.assign({}, state, {field3: action.data});
        case "FIELD4_CHANGED":
            return Object.assign({}, state, {field4: action.data});
        case "FIELD5_CHANGED":
            return Object.assign({}, state, {field5: action.data});
        default:
            return state;
    }
}

很抱歉样板代码的长文本，但我认为它可能有用。

所以我对每个输入都有一个动作，我按照redux的规定处理reducer中的状态变化。

但我的问题是：每当有人在其中一个字段中输入值时，是否会重新呈现整个表单？

据我所知，＆＃34; connect＆＃34;来自react-redux将检查当前状态对象是否与下一个更新的状态对象不同。如果它不同，它将每次重新呈现整个Details组件，而不仅仅是那个特定的输入字段。

这让我相信我以错误的方式解决这个问题。如果我输入＆＃34; Field1＆＃34;的值，我不希望其他字段重新渲染，但我认为这是因为我每次都返回一个新对象在reducer中，如果任何输入字段发生变化。

我知道我们有redux-forms插件，但是我想在使用react / redux时围绕处理表单的逻辑。

修改：
所以我想我也许可以改变我的＃map; mapStateToProps＆＃34;功能如下：

function mapStateToProps(state) {
    return {
        field1: state.editedGroup.field1,
        field2: state.editedGroup.field2,
        field3: state.editedGroup.field3,
        field4: state.editedGroup.field4,
        field5: state.editedGroup.field5,
    }
}

这样，每次只有一个道具会更新。但与此同时，如果我错了，请纠正我，如果其中一个道具得到更新，整个事情会再次重新渲染？
如果是这样，那么这种方式就没用了。

Answer 1

呀。你说的是正确的。这个确切的问题决定了版本5和版本6之间redux-form的主要设计变化。

使用React和Redux时，使用表单的正确方法是什么？

1 个答案: