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

我有以下形式的Details.js终极版智能组件：使用React和Redux时，表单的正确使用方法是什么？

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中的状态变化。

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

就我所知，react-redux中的“connect”将检查当前状态对象是否与下一个更新的状态对象不同。如果不同，它将每次都重新渲染整个Details组件，而不仅仅是特定的输入字段。

这使我相信我会以错误的方式去解决这个问题。如果我输入“Field1”的值，我不希望其他字段被重新渲染，但我认为这会发生什么，因为我每次在Reducer中返回一个新对象，如果有任何输入领域改变。

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

编辑：
所以我在想，我也许可以改变我的“mapStateToProps”功能是这样的：

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

这种方式仅道具之一将得到每一次更新。但同时，如果我错了，纠正我，如果其中一个道具得到更新，整个事情会重新渲染？
如果是这样，那么这种方式将是无用的。

来源

2016-11-22 gjvatsalya

是的。你说的是对的。这个确切的问题是什么决定了版本5和版本6之间的主要设计变更。

来源

2016-11-22 15:18:27

你知道设计更改是什么吗？ redux形式如何解决这个问题？ – gjvatsalya

查看5 - > 6的迁移指南。这应该让你知道他们如何解决它。 –

好的，谢谢。所以基本上，这听起来像是他们让每个领域的减速机上的不同属性。虽然没有真正清楚如何解决问题。它仍然会刷新整个表单。也许我需要深入研究一下。 – gjvatsalya

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

回答

相关问题