假设我有一个包含输入字段的组件 A。 第二个组件 B 包含一个提交按钮。 这两个组件没有直接链接(例如,它们是 2 深度树中的 2 个叶子)
提交时我需要检索输入值,如何在 react + redux 环境中解决这个问题?
我想到的最明显的解决方案是将 React 组件的引用绑定(bind)到 redux 状态, 通过这种方式,状态具有对输入值的引用(通过 state.fieldName.input.value 访问)。
在提交按钮组件(记住它与输入组件没有直接关系)中,mapStateToProps 返回 onClick prop,它是一个可以访问状态的函数,因此可以访问输入值并可以执行“不纯”工作(例如 db请求)
所以我的代码应该是这样的:
//components/TestForm.jsx
class TestForm extends Component {
render() {
return <FormInput
ref={(ref) => this.props.registerFormField(ref)}
value=...
...
/>
}
}
//redux/actions/index.js
const registerFormField = (field) => {
return {
type: ActionTypes.REGISTER_FORM_FIELD,
field: field
}
}
//redux/reducers/index.js
const rootReducer = (state = {}, action) => {
switch (action.type) {
case ActionTypes.REGISTER_FORM_FIELD:
var newState = {...state};
newState[action.field.input.name] = action.field.input;
return newState
default:
return state
}
}
//containers/SubmitButton.js
const mapStateToProps = (state, ownProps) => {
return {
text: "Submit",
onClick: () => {
//do your impure job with state.fieldName.value
}
}
}
const SubmitButton = connect(
mapStateToProps,
mapDispatchToProps
)(FormSubmitButton)
//components/FormSubmitButton.jsx
class FormSubmitButton extends Component {
render() {
return <button
onClick={this.props.onClick}
>
{this.props.text}
</button>
}
}
我简要阅读了 redux-form 文档,它似乎无法绑定(bind)两个不相关的组件,如上所述(也许我错了;))
有没有其他正确/优雅的解决方案来解决这个问题?
最佳答案
在这种情况下不需要使用 ref
。
惯用的方法是将您的表单字段创建为 controlled components通过提供 value
属性。这可以从全局状态(映射到您的 mapStateToProps
)或公共(public)父组件的状态中提供。
您还需要监听输入的变化。为此,为您的 input
的 onChange
Prop 提供一个处理程序。然后,此处理程序应根据您采用的方法在您的 redux 存储或组件状态中更改表单数据。
这样,只要它可以访问表单数据,将提交按钮等放置在 React 应用程序的哪个位置都没有关系。
有关您的用例的工作示例,have a look at this JSBin .这演示了如何在不依赖 ref
的情况下将表单分成多个组件并将输入值保存在 redux 存储中。
关于javascript - react + 终极版 : submit multi-component form,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38330014/