提交處理函數中的Redux-form獲取事件

在我的redux表單旁邊，我有一個帶有表單名稱的小工具欄，用於在不同的表單之間切換。當用戶通過側邊欄在這些表單之間切換時，爲了保持應用程序狀態的更新，我通過redux形式的handleSubmit函數提交當前表單狀態。提交被解僱，更新應用程序狀態。這工作正常，但爲了使點擊形式可見，我需要將我的狀態中的「活動」值更改爲表單名稱，該名稱在側邊欄項目循環中的列表項上設置爲類名。提交處理函數中的Redux-form獲取事件

我試圖通過event.target.className接收點擊的元素classname，但它似乎沒有結果，因爲事件似乎不是我期望的事件。如何在handleSubmit任務中訪問該事件以使用側欄的列表項的單擊className更改活動窗體？

p.s.我將創建一個單獨的函數，if/else語句或其他的這個saveData函數，因爲我知道event.target.className將不正確，如果表單將由表單按鈕本身提交。

示例代碼

... some form field code 

class ComponentName extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      someName : this.props.someName, 
     } 

     this.saveData = this.saveData.bind(this); 
    } 

    saveData(values, dispatch) { 

     let newState = { 
      SomeName : update(this.state.someName, { 
       active : { 
        $set : this.state.active <======= event.target.className ? 
       }, 
       rows : { 
        data : { 
         $set : values.rows 
        } 
       } 
      }) 
     } 

     this.setState(newState); 

     dispatch(someActionNAme(newState.someName)); 

    } 


    render() { 

     const { handleSubmit, submitting } = this.props; 

     var items = {} 
     Object.values(this.state.someName).map(function(item, i) { 
      if (typeof item == 'object' && item !== 'undefined' && item !== null) { 
       items[i] = item; 
      } 
     }) 

     return (
      <div className="someName__form"> 

       <form onSubmit={handleSubmit(this.saveData)}> 

        <ul className="someName__sidebar"> 
         { Object.keys(items).map((item, i) => (
           <li 
            key={i} 
            data-id={i} 
            onClick={handleSubmit(this.saveData)} 
            id={items[item].meta.name} 
            className={items[item].meta.name} 
            data-sort={items[item].meta.sort} 
           > 

            {items[item].meta.label} 

            {this.state.someName.active == items[item].meta.name && 
            <b> 
             &nbsp; [Active] 
            </b> 
            } 

           </li> 
          ) 
         )} 
        </ul> 

        <FieldArray name="rows" component={renderRows} /> 

        <div> 
         <button id="button" type="submit" disabled={submitting} onClick={handleSubmit(this.saveData)}> 
          Save 
         </button> 
        </div> 

       </form> 


      </div> 
     ) 

    } 
} 

const mapStateToProps = (state) => ({ 
    initialValues : state.someName.rows, 
    someName : state.someName, 
}); 

const mapDispatchToProps = (dispatch) => ({ 
    dispatch, 
}); 

ComponentName = reduxForm({ 
    form : 'formName', 
    destroyOnUnmount: false 
})(ComponentName); 

export default connect(mapStateToProps, mapDispatchToProps)(ComponentName);

來源

2017-08-11 directory

幫助別人的時候，我發現自己被潛水的解決方案深入到終極版形式GitHub的問題的文章。

通過handleSubmit函數向表單值添加一些附加數據非常簡單且可能。通過添加如下數據，附加數據將被合併到具有以下值的對象中。

...onClick={handleSubmit(values => this.saveData({...values, active: 'componentName' }))}

值的目標現在將包含一個鍵值對：

{ 
    "languages": [ 
    { 
     "name": "Spanish", 
     "level": "3" 
    } 
    ], 
    "active": "componentName" 
}

來源

2017-08-11 15:30:55 directory

提交處理函數中的Redux-form獲取事件

回答

相關問題