Question

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

我试图通过event.target.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);

Answer 1

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

通过handleSubmit函数向表单值添加一些额外的数据是很容易的。通过添加如下数据，附加数据将合并到对象中，其值如下所示。

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

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

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

Redux-form在提交处理函数中获取事件

1 个答案: