Javascript 如何从选项对象内部调用操作?

Javascript 如何从选项对象内部调用操作?,javascript,jquery,reactjs,redux,formbuilder,Javascript,Jquery,Reactjs,Redux,Formbuilder,我正在尝试在我的react应用程序中实现这一点。它有一个选项,按下save按钮时,将调用options中定义的onSave函数。我希望此函数调用我现有的addForm操作,然后将表单发送到要保存的数据库,但是我不确定如何正确调用该操作并传递它所需的表单数据 我曾尝试在组件中使用自定义addForm方法,但这没有什么不同 以下是form builder组件的代码 import React, { Component, createRef } from 'react'; import { Contai

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

我曾尝试在组件中使用自定义addForm方法,但这没有什么不同

以下是form builder组件的代码

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);
根据操作,预期输出将是控制台日志,但我得到的错误如下:

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 | };

您需要绑定此

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

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

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

非常感谢。这起作用了。我必须创建一个新对象,该对象的名称和formData已传递给addForm,但现在一切都好了
onSave: (formData) => {   //Auto binds `this`
            const newForm = {
                name: this.state.name,
                form: formData
            };

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