提交处理程序函数中的 Redux-form get 事件

Question

在我的redux表单旁边，我有一个带有表单名称的小侧边栏，可以在不同的表单之间切换。当用户通过侧边栏在这些表单之间切换时，为了随时更新应用程序状态，我通过 redux-form handleSubmit 函数提交当前表单状态。提交通过更新应用状态的调度触发。这工作正常，但要使单击的表单可见，我需要将我状态中的"active"值更改为表单的名称，此名称在侧边栏项循环中的列表项上设置为类名。

我尝试通过 event.target.className 接收单击的元素类名，但它似乎没有结果，因为事件似乎不是我预期的事件。如何在句柄提交任务中访问事件，以使用侧边栏列表项的单击类名称更改活动表单？

附言我将为此 saveData 函数创建一个单独的函数，如果/else 语句或其他内容，因为我知道如果表单按钮本身提交表单，则 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);

Answer 1

为了帮助其他人，我通过深入研究 redux-form 的 github 问题文章找到了自己的解决方案。

通过 handleSubmit 函数向表单值添加一些附加数据很容易且可能。通过添加如下数据，附加数据将合并到对象中，值如下。

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

值对象现在将包含一个额外的键值对：

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