时间戳

首页 > 解决方案 > 为什么我的事件处理函数未定义？

javascript - 为什么我的事件处理函数未定义？

问题描述

我在浏览器控制台中不断收到以下错误消息：

**

handleSubmit phlogEditor 错误 TypeError: _this4.props.handleNewPhlogSubmission 不是 phlog-editorMach2.js:142 的函数

**

我正在尝试使用道具将图像文件上传到我的照片博客 api (DRF)。这是代码：

phlog-manager.py（这是父组件）：

export default class PhlogManager extends Component {
    constructor() {
        super();

        this.state = {
            phlogItems: [],
            phlogToEdit: {}
        };

        this.handleNewPhlogSubmission = this.handleNewPhlogSubmission.bind(this);
        this.handleEditPhlogSubmission = this.handleEditPhlogSubmission.bind(this);
        this.handlePhlogSubmissionError = this.handlePhlogSubmissionError.bind(this);
        this.handleDeleteClick = this.handleDeleteClick.bind(this);
        this.handleEditClick = this.handleEditClick.bind(this);
        this.clearPhlogToEdit = this.clearPhlogToEdit.bind(this);
    }

    clearPhlogToEdit() {
        this.setState({
            phlogToEdit: {}
        });
    }

    handleEditClick(phlogItem) {
        this.setState({
            phlogToEdit: phlogItem
        });
    }

    handleDeleteClick(id) {
        axios
            .delete(
                `http://127.0.0.1:8000/phlogapi/phlog/${id}`,
                { withCredentials: true }
            )
            .then(response => {
                this.setState({
                    phlogItems: this.state.phlogItems.filter(item => {
                        return item.id !== id;
                    })
                });

                return response.data;
            })
            .catch(error => {
                console.log('handleDeleteClick error', error);
        });
    }

    handleEditPhlogSubmission() {
        this.getPhlogItems();
    }

这是创建在父组件中标记为未定义的函数的位置

    handleNewPhlogSubmission(phlogItem) {
        this.setState({
            phlogItems: [phlogItem].concat(this.state.phlogItems)
        });
    }

    handlePhlogSubmissionError(error) {
        console.log('handlePhlogSubmissionError', error);
    }

    getPhlogItems() {
        axios
          .get('http://127.0.0.1:8000/phlogapi/phlog',
            {
               withCredentials: true 
            }
          )
          .then(response => {
              this.setState({
                  phlogItems: [...response.data]
              });
          })
          .catch(error => {
              console.log('getPhlogItems error', error);
          });
    }

    componentDidMount() {
        this.getPhlogItems();
    }

    render() {
        return (
            <div>
                <Header/>
                <div className='phlog-manager'>
                    {/* <div className='centered-column'> */}
                        <PhlogEditor
                            handleNewPhlogSubmission={this.state.handleNewPhlogSubmission}
                            handleEditPhlogSubmission={this.handleEditPhlogSubmission}
                            handlePhlogSubmissionError={this.handlePhlogSubmissionError}
                            clearPhlogToEdit={this.clearPhlogToEdit}
                            phlogToEdit={this.state.phlogToEdit}
                        />

phlog-editor.py 是子组件： 

class PhlogEditor extends Component {
    constructor(props) {
        super(props);

        this.state = {
            id: '',
            phlog_status: '',
            phlog_image_url : '',
            editMode: false,
            position: '',
            apiUrl: 'http://127.0.0.1:8000/phlogapi/phlog/create/',
            apiAction: 'post'
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.componentConfig = this.componentConfig.bind(this);
        this.djsConfig = this.djsConfig.bind(this);
        this.handlePhlogImageDrop = this.handlePhlogImageDrop.bind(this);
        this.deleteImage = this.deleteImage.bind(this);

        this.phlogImageRef = React.createRef();
    }

    deleteImage(event) {
        event.preventDefault();
        axios
            .delete(
                `http://127.0.0.1:8000/phlogapi/phlog/${this.state.id}/delete/`,
                { withCredentials: true }
            )
            .then(response => {
                this.props.handlePhlogImageDelete();
            })
            .catch(error => {
                console.log('deleteImage failed', error)
        });
    }

    componentDidUpdate() {
        if (Object.keys(this.props.phlogToEdit).length > 0) {
            const {
                id,
                phlog_image_url,
                phlog_status,
                position
            } = this.props.phlogToEdit;

            this.props.clearPhlogToEdit();

            this.setState({
                id: id,
                phlog_image_url: phlog_image_url || '',
                phlog_status: phlog_status || '',
                position: position || '',
                editMode: true,
                apiUrl: `http://127.0.0.1:8000/phlogapi/`,
                apiAction: 'patch'
            });

        } 
    }

    handlePhlogImageDrop() {
        // console.log(this.state);
        return {
            addedfile: file => this.setState({ phlog_image_url: file })
        };
    };

    componentConfig() {
        return {
          iconFiletypes: [".jpg", ".png"],
          showFiletypeIcon: true,
          postUrl: "https://httpbin.org/post"
        };
    }

    djsConfig() {
        return {
          addRemoveLinks: true,
          maxFiles: 1
        };
    }

    buildForm() {
        let formData = new FormData();

        formData.append('phlog[phlog_status]', this.state.phlog_status);
        formData.append('phlog[position]', this.state.position);

        if (this.state.phlog_image_url) {
            formData.append(
                'phlog[phlog_image_url]',
                this.state.phlog_image_url
            );
        }
        console.log(formData);
        return formData;
    }


    handleChange(event) {
        this.setState({
          [event.target.name]: event.target.value
        });
    }


    handleSubmit(event) {
        // console.log(this.state);
        axios({
            headers: {'content-type':'multipart/form-data'},
            method: this.state.apiAction,
            url: this.state.apiUrl,
            data: this.buildForm(),
            withCredentials: true,
            xsrfHeaderName: 'X-CSRFTOKEN',
            xsrfCookieName: 'crsftoken',
            // headers: {
            //     'Content-type': 'application/json',
            //     Authorization: `JWT ${localStorage.getItem('token')}` ,
            // },
            // body: JSON.stringify(data)

        })
        .then(response => {
            // console.log(response);
            console.log(this.props);

this.props 将 handleNewPhlog 标记为未定义

            // localStorage.setItem('token', json.token);
            if (this.state.editMode) {
                this.props.handleEditPhlogSubmission();
            } else {

这是handleNewPglogSubmission 被标记为未定义的地方。

                this.props.handleNewPhlogSubmission(response.data.phlogItems);
                // debugger;
            }

            this.setState({
                phlog_status: '',
                phlog_image_url: '',
                position: '',
                editMode: false,
                apiUrl:'http://127.0.0.1:8000/phlogapi/phlog/', 
                apiAction: 'post'
            });

            [this.phlogImageRef].forEach(ref => {
                ref.current.dropzone.removeAllFiles();
            });
        })
        .catch(error => {
            console.log('handleSubmit phlogEditor error', error);
        });

       event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit} className='phlog-editor-wrapper'>
                <div className='two-column'>
                    <input
                        type='text'
                        name='position'
                        placeholder='Position'
                        value={this.state.position}
                        onChange={this.handleChange}
                    />

                    <select
                        name='phlog status'
                        value={this.state.phlog_status}
                        onChange={this.handleChange}
                        className='select-element'
                    >
                        <option value='Draft'>Draft</option>
                        <option value='Published'>Published</option>
                    </select>
                </div>

                <div className='image-uploaders'>
                    {this.state.phlog_image_url && this.state.editMode ? (
                        <div className='phlog-manager-image-wrapper'>
                            <img src={this.state.phlog_image_url} />

                        <div className='remove-image-link'>
                            <a onClick={() => this.deleteImage('phlog_image_url')}>
                                Remove Photos
                            </a>
                        </div>
                    </div>
                ) : (
                    <DropzoneComponent
                        ref={this.phlogImageRef}
                        config={this.componentConfig()}
                        djsConfig={this.djsConfig()}
                        eventHandlers={this.handlePhlogImageDrop()}
                    >
                        <div className='phlog-msg'>Phlog Photo</div>
                    </DropzoneComponent>
                )}
                </div>
                    <button className='btn' type='submit'>Save</button>
            </form>
        );
    }
}

export default PhlogEditor;

标签： javascriptreactjsfrontend

解决方案

请更新this.state.handleNewPhlogSubmission到this.handleNewPhlogSubmission同时将函数作为道具传递给子组件

推荐阅读