ReactJS 和 Redux - 从多个事件提交表单（不是按钮）答案

【问题标题】：ReactJS and Redux - Submit Form From Multiple Events (Not Buttons)ReactJS 和 Redux - 从多个事件提交表单（不是按钮）
【发布时间】：2017-10-10 17:53:58
【问题描述】：

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

我有一个界面（内置在 React JS 中），用户需要在其中背靠背地“评分”多个项目。 IE，他们将拥有“项目 1”，并为其分配 1、2 或 3 颗星，然后单击“下一步”，这会将他们带到“项目 2”，然后他们会给予 1、2 或 3 颗星。 ..等等，直到他们到达终点。还有一个导航菜单可以让他们“跳转”到他们想要的任何项目，如果他们愿意的话。

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

Redux 表单是一个组件，那么表单中的各个项目就是它们自己的组件。即：

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'),
)

【问题讨论】：

你能告诉我们你是如何将你的组件连接到 Redux 商店的吗？
更新了问题以包括我连接的组件代码（当然被严重截断）和商店（通过包装路由器的提供者）。

标签： reactjs redux react-redux redux-form

【解决方案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 中调用该操作

【讨论】：