javascript - 如何从选项对象内部调用一个 Action ？

Question

我正在尝试实现这个 form builder进入我的 react 应用程序。它有一个选项，当按下保存按钮时，将调用在选项中定义的 onSave 函数。我希望此函数调用我现有的 addForm 操作，然后将表单发送到数据库以进行保存，但我不确定如何正确调用该操作并将其传递所需的表单数据。

我曾尝试在组件中使用自定义 addForm 方法，但这没有任何区别。

这是表单构建器组件的代码

import React, { Component, createRef } from 'react';
import { Container } from 'reactstrap';
import { addForm } from '../actions/formActions';
import { connect } from 'react-redux';
import $ from 'jquery';
import PropTypes from 'prop-types';

window.jQuery = $;
window.$ = $;

require('jquery-ui-sortable');
require('formBuilder');

class formSimplified extends Component {
    state = {
        name: '',
        data: []
    };

    options = {
        formData: [
            {
                type: 'header',
                subtype: 'h1',
                label: 'Test Form 1'
            }
        ],
        onSave: function(formData) {
            const newForm = {
                name: this.state.name,
                form: formData
            };

            // Add form via addForm action
            this.props.addForm(newForm);
        }
    };

    fb = createRef();
    componentDidMount() {
        $(this.fb.current).formBuilder(this.options);
    }

    static propTypes = {
        form: PropTypes.object.isRequired,
        isAuthenticated: PropTypes.bool
    };

    render() {
        return (
            <Container className="mb-5">
                <div id="fb-editor" className="form" ref={this.fb} />
            </Container>
        );
    }
}

const mapStateToProps = state => ({
    form: state.form,
    isAuthenticated: state.auth.isAuthenticated
});

export default connect(
    mapStateToProps,
    { addForm }
)(formSimplified);

这是 formActions.js 中的 addForm Action

export const addForm = form => (dispatch, getState) => {
    axios
        .post('/api/forms', form, tokenConfig(getState))
        .then(res =>
            dispatch({
                type: ADD_FORM,
                payload: res.data
            })
        )
        .catch(err =>
            dispatch(returnErrors(err.response.data, err.response.status))
        );
    console.log('Saved Form');
};

根据操作，预期输出将是控制台日志，但我得到的错误是:

TypeError: Cannot read property 'addForm' of undefined
onSave
/src/components/FormBuilder.js:91
  88 |         //$('.render-wrap').formRender({formData});
  89 |         //window.sessionStorage.setItem('formData', JSON.stringify(formData));
  90 |         // Save form using addForm;
> 91 |         this.props.addForm(formData);
  92 |     }
  93 |     //disableHTMLLabels: true,
  94 | };

Answer 1

您需要绑定(bind)this。

简单的方法是使用箭头函数，

onSave: (formData) => {   //Auto binds `this`
            const newForm = {
                name: this.state.name,
                form: formData
            };

            // Add form via addForm action
            this.props.addForm(newForm);
        }