Question

TO SUMMARIZE ：如何在没有提交按钮（来自componentDidUpdate的IE或自定义函数）的情况下提交React JS Redux表单？

我有一个界面（内置在React JS中），用户需要在其中获得“得分”。多项，背靠背。 IE，他们将拥有＆＃39;项目1＆＃39;，并为其分配1,2或3星，然后点击下一步＆＃39;，这将把他们带到＆＃39;项目2＆＃39;，然后他们给出1,2或3颗星......依此类推，直到它们到达终点。还有导航菜单，可让他们“跳跃”。他们想要的任何物品，如果他们愿意的话。

由于我们正在处理的用户的性质啊，界面的设计理念是“得分”。单个项目将立即保存该项目的分数（对远程API的POST调用）。这样，如果他们退出并回来，他们的进展仍然存在。我通过Redux Sagas处理API功能，这个特殊组件是Redux表单。

Redux表单是一个组件，然后表单中的各个项目是它们自己的组件。 IE：

ItemsComponent // <-- this is the connected Redux form ItemComponent // <-- this contains the individual item, the stars for scoring, etc.

我遇到的问题是，按需提交Redux表单似乎非常困难。我需要以编程方式提交此表单，而不是通过提交按钮，但Redux和/或React似乎在我试图做的每一个方面都让我失望。

我最接近的是将一个clickHandler传递给ItemComponent，它首先执行其他一些功能，然后调用handleSubmit(this.submit） - 但是，虽然它没有给我一个错误，似乎根本就没有触发。

clickHandler = (item) => { console.log(item) // <-- this triggers const { handleSubmit } = this.props handleSubmit(this.submit) // <-- this does not return me any error } submit = (values) => { console.log('submit') // <-- this never triggers }

简而言之，如何使用提交按钮触发Redux表单提交而不使用？理想情况下，来自某种类型的clickHandler？

我的项目组件：

class ItemsComponent extends Component { ... } const formed = reduxForm({ form: 'itemsform', })(ItemsComponent) const mapStateToProps = state => { return { items: state.getItemsReducer, // <-- Redux Saga Reducer } } const connected = connect( mapStateToProps, { getItemsRequest, // <-- Redux Saga Action } )(formed)

我的商店通过路由器连接：

const store = createStore( IndexReducer, // <-- combined Redux reducers composeSetup(applyMiddleware(sagaMiddleware)) ) ... ReactDOM.render( <Provider store={ store }> <Router history={ browserHistory }> ... </Router> </Provider>, document.getElementById('root'), )

Answer 1

关于the official documentation关于通过调度操作提交表单，我们有以下内容：

RemoteSubmitButton.js

import React from 'react'
import { connect } from 'react-redux'
import { submit } from 'redux-form'

const style = {
  padding: '10px 20px',
  width: 140,
  display: 'block',
  margin: '20px auto',
  fontSize: '16px'
}

const RemoteSubmitButton = ({ dispatch }) =>
  <button
    type="button"
    style={style}
    onClick={() => dispatch(submit('remoteSubmit'))}>Submit</button>
//                                  ^^^^^^^^^^^^ name of the form

export default connect()(RemoteSubmitButton)

在您的情况下，您将dispatch(submit('remoteSubmit'))提取到您的操作中，并在已连接的组件中调用该操作componentDidUpdate

ReactJS和Redux - 从多个事件（非按钮）提交表单

1 个答案: