ReactJS和終極版 - 提交表單從多個事件（不是按鈕）

總結：我怎麼可以提交一個陣營JS終極版形式沒有提交按鈕（IE從componentDidUpdate，或自定義功能）？ReactJS和終極版 - 提交表單從多個事件（不是按鈕）

我有一個接口（內置在React JS中），用戶需要對多個項目進行「評分」，背靠背。 IE，他們會有'項目1'，併爲它分配1,2或3星，然後點擊'下一步'，這將把他們帶到'項目2'，然後給他們1,2或3星。等等，直到他們到達最後。有也導航菜單，讓他們'跳'到他們想要的任何物品，如果他們願意的話。

由於我們正在處理的用戶的性質啊，界面的設計思路是，「評分」單個項目會立即保存該項目的得分（調用POST遠程API ）。這樣，如果他們退出並回來，他們的進展仍然存在。我通過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和/或React似乎阻止我關閉我試圖做到這一點的每一種方式。

我來是傳遞一個clickHandler事件的ItemComponent，先執行一些其他的功能，然後調用handleSubmit(this.submit）最近的 - ，但同時它不返回我的錯誤，似乎根本就沒有被觸發。

總之，我怎麼能引發終極版形式使用提交按鈕提交沒有？理想情況下，從某種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'), 
)

來源

2017-10-10 CGriffin

你能告訴我們一個連接組件的你是如何連接組件的Redux的商店採取行動？ – lilezek

更新了問題以包含我的連接組件代碼（當然嚴重被截斷）以及商店（通過提供程序封裝路由器）。 – CGriffin

繼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

來源

2017-10-10 22:02:08

ReactJS和終極版 - 提交表單從多個事件（不是按鈕）

回答

相關問題