Javascript 如何从选项对象内部调用操作?
我正在尝试在我的react应用程序中实现这一点。它有一个选项,按下save按钮时,将调用options中定义的onSave函数。我希望此函数调用我现有的addForm操作,然后将表单发送到要保存的数据库,但是我不确定如何正确调用该操作并传递它所需的表单数据 我曾尝试在组件中使用自定义addForm方法,但这没有什么不同 以下是form builder组件的代码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
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);
}