サブミットハンドラ関数のRedux-form getイベント

Question

私のreduxフォームの隣には、フォームの名前を持つ小さなサイドバーがあり、さまざまなフォームを切り替えることができます。ユーザがサイドバーを介してこれらのフォーム間を切り替えるときにいつでもアプリの状態を更新するため、私はredux-formのhandleSubmit関数を介して現在のフォーム状態を送信します。提出はアプリの状態を更新するディスパッチで起動されます。これは正常に動作しますが、クリックされたフォームを表示するには私の状態の「アクティブ」値をフォームの名前に変更する必要があります。この名前は、クラス名としてサイドバーのアイテムループのリストアイテムに設定されます。

event.target.classNameを介してクリックされた要素クラス名を受け取ろうとしましたが、イベントが期待したイベントではないように見えるため、結果がないようです。サイドバーのリストアイテムのクリックされたクラス名を使用してアクティブフォームを変更するには、handleSubmitミッションのイベントにどのようにアクセスできますか？

p.s.私は分離された関数、if/else文、またはこのsaveData関数の何かを作成します。私が知っているように、form.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); 

Answer 1

、私は自分自身の深いReduxの形式のgithubの発行記事に飛び込むことで解決策を見つけました。

handleSubmit関数を使用すると、フォームデータに追加のデータを簡単に追加できます。以下のようにデータを追加することにより、追加データは次の値でオブジェクトにマージされます。

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

：

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

値は今、余分なキーと値のペアが含まれますオブジェクト