如何从子组件为状态父项设置Field的值

时间:2019-08-22 10:10:23

标签: reactjs

我有2个组件:Community.js和Edit.js

我致电下面的“从社区编辑”:

<DetailModal
                    DetailModal={Detail}
                    errors={this.state.errors}
                    uploadFile={this.props.uploadFileActions.uploadFile}
                    onSave={this.save}
                    onChange={this.onChange}
                    mode={this.state.mode}
                    data={this.state.details}
                    isOpen={this.state.modalIsOpen}
                    closeModal={this.closeModal}
                    editable={isHasEditPermisson}
                />

在社区中,我下面有一个函数onchange():

onChange = (field, data) => {
        let value = null;
        if (data) {
            value = data
        }
        this.setState(state => ({
            details: {
                ...state.details,
                [field]: value
            },
            errors: {
                ...state.errors,
                [field]: undefined
            }
        }));
        // }
    }

在“编辑”中,我有一个用来选择图像/视频文件的函数:

selectFile = (file) => {
        if (file && file.target.files.length > 0) {
            const checkType = file.target.files[0].type.split('/')[0]
            const extendType = file.target.files[0].type.split('/')[1]
            const fileArr = [];
            // if (checkType === "video") {
            //     console.log('this.getDuration(file)', this.getDuration(file))
            //     if (this.getDuration(file) > 60) {
            //         alert("stop");
            //         return;
            //     }
            // }
            // this.props.uploadFile(file.target.files[0], (res) => {
            //     this.props.onChange('ResourceUrl', `${this.props.data.ResourceUrl ? `${this.props.data.ResourceUrl};` : ''}${res.data.Data}`);
            // });
            fileArr.push({
                file: file.target.files[0],
                urlFile: URL.createObjectURL(file.target.files[0]),
            });
            this.props.onChange('ResourceUrl', `${this.props.data.ResourceUrl ? `${this.props.data.ResourceUrl};` : ''}${fileArr[0].urlFile}`);
            this.props.onChange('ResourceFile', this.props.data.ResourceFile ? this.props.data.ResourceFile : fileArr[0].file);
            if (checkType === "image") {
                this.setState({
                    fileType: "image/*",
                    extend: extendType
                })
            } else {
                this.setState({
                    fileType: "video/*",
                    countVideo: 1,
                    extend: extendType
                })
            }
            // file.target.value = '';
        }
    }

这是社区中的Init状态:

constructor(props) {
        super(props);
        this.escFunction = this.escFunction.bind(this);
        this.state = {
            modalIsOpen: false,
            mode: 'add',
            details: {},
            errors: {},
            defaultRole: constants.CollaboratorRole.default,
            permanentRole: constants.CollaboratorRole.permanent,
            isOpenDeleteConfirm: false
        };
    }

在这里,我在Community中调用onchange()为2个字段设置值:ResourceUrl,ResourceFile

但是在为ResourceFile设置值时出现问题。当我选择第二个文件时,我仍然会获得第一个文件的价值。 我不知道如何将第二个文件的值设置为ResourceFile,这意味着我希望ResourceFile是一个数组,其中包含我刚刚选择的两个文件的信息。

0 个答案:

没有答案