提交处理函数中的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获取事件

回答

相关问题