Javascript 无法读取属性'；设置状态'；在handleupload未定义的

我正在尝试使用antd创建带有文件上载的表单，但我无法使用handleupload函数，我有错误：

Cannot read property 'setState' of undefined
    at handleupload (registertenantform.js:43)

代码如下：

import React, { Component } from 'react';
import { Input, Upload , Icon, message} from 'antd';
import Form from '../../components/uielements/form';
import Checkbox from '../../components/uielements/checkbox';
import Button from '../../components/uielements/button';
import Notification from '../../components/notification';
import { adalApiFetch } from '../../adalConfig';

const FormItem = Form.Item;

class RegisterTenantForm extends Component {
    constructor(props) {
        super(props);
        this.state = {TenantId: '', TenantUrl: '', CertificatePassword: '' };
        this.handleChangeTenantUrl = this.handleChangeTenantUrl.bind(this);
        this.handleChangeCertificatePassword = this.handleChangeCertificatePassword.bind(this);
        this.handleChangeTenantId= this.handleChangeTenantId.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    };

    handleChangeTenantUrl(event){
        this.setState({TenantUrl: event.target.value});
    }

    handleChangeCertificatePassword(event){
        this.setState({CertificatePassword: event.target.value});
    }

    handleChangeTenantId(event){
        this.setState({TenantId: event.target.value});
    }

    beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        if (!isJPG) {
          message.error('You can only upload JPG file!');
        }
    }

    handleupload(info){
        //let files = e.target.files;
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }

        if (info.file.status === 'done') {
            this.setState({ loading: false });
            this.setState({ 'selectedFiles': info.file });
        }

    }

    state = {
            confirmDirty: false,
            loading: false,
    };

    handleSubmit(e){
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                /*Notification(
                'success',
                'Received values of form',
                JSON.stringify(values)
                );*/

                let data = new FormData();
                //Append files to form data
                data.append("model", JSON.stringify({ "TenantId": this.state.TenantId, "TenantUrl": this.state.TenantUrl, "CertificatePassword": this.state.CertificatePassword }));
                //data.append("model", {"TenantId": this.state.TenantId, "TenantUrl": this.state.TenantUrl, "TenantPassword": this.state.TenantPassword });

                let files = this.state.selectedFiles;
                for (let i = 0; i < files.length; i++) {
                  data.append("file", files[i], files[i].name);
                }

                const options = {
                  method: 'put',
                  body: data,
                  config: {
                    headers: {
                      'Content-Type': 'multipart/form-data'
                    }
                  }
                };

                adalApiFetch(fetch, "/Tenant", options)
                  .then(response => response.json())
                  .then(responseJson => {
                    if (!this.isCancelled) {
                      this.setState({ data: responseJson });
                    }
                  })
                  .catch(error => {
                    console.error(error);
                });
            }
        });      
    }



    render() {

        const uploadButton = (
            <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'} />
                <div className="ant-upload-text">Upload</div>
            </div>
        );

        const { getFieldDecorator } = this.props.form;

        const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 6 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 14 },
        },
        };
        const tailFormItemLayout = {
        wrapperCol: {
            xs: {
            span: 24,
            offset: 0,
            },
            sm: {
            span: 14,
            offset: 6,
            },
        },
        };
        return (
            <Form onSubmit={this.handleSubmit}>
                <FormItem {...formItemLayout} label="Tenant Id" hasFeedback>
                {getFieldDecorator('tenantid', {
                    rules: [
                    {
                        required: true,
                        message: 'Please input your tenant id',
                    },
                    ],
                })(<Input name="tenantid" id="tenantid" onChange={this.handleChangeTenantId}/>)}
                </FormItem>
                <FormItem {...formItemLayout} label="Certificate Password" hasFeedback>
                {getFieldDecorator('certificatepassword', {
                    rules: [
                    {
                        required: true,
                        message: 'Please input your password!',
                    }
                    ],
                })(<Input type="certificatepassword" onChange={this.handleChangeCertificatePassword}/>)}
                </FormItem>
                <FormItem {...formItemLayout} label="Tenant admin url" hasFeedback>
                {getFieldDecorator('tenantadminurl', {
                    rules: [
                    {
                        required: true,
                        message: 'Please input your tenant admin url!',
                    }
                    ],
                })(<Input type="tenantadminurl" onChange={this.handleChangeTenantUrl} />)}
                </FormItem>
                <FormItem {...tailFormItemLayout}>
                    <Upload  onChange={this.handleupload} beforeUpload={this.beforeUpload}>

                        <Button>
                            <Icon type="upload" /> Click to Upload
                        </Button>
                    </Upload>
                    <Button type="primary" htmlType="submit">
                        Register tenant
                    </Button>
                </FormItem>
            </Form>
        );
    }
}

const WrappedRegisterTenantForm = Form.create()(RegisterTenantForm);
export default WrappedRegisterTenantForm;

import React，{Component}来自'React'；
从“antd”导入{输入、上载、图标、消息}；
从“../../components/uielements/Form”导入表单；
从“../../components/uielements/Checkbox”导入复选框；
从“../../components/uielements/Button”导入按钮；
从“../../components/Notification”导入通知；
从“../../adalConfig”导入{adalApiFetch}；
const FormItem=表单项；
类RegisterTenantForm扩展组件{
建造师（道具）{
超级（道具）；
this.state={TenantId:''，TenantUrl:''，CertificatePassword:''}；
this.handlechangetranturl=this.handlechangetranturl.bind（this）；
this.handleChangeCertificatePassword=this.handleChangeCertificatePassword.bind（this）；
this.handlechangetantid=this.handlechangetantid.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
};
handleChangeTenantUrl（事件）{
this.setState（{TenantUrl:event.target.value}）；
}
handleChangeCertificatePassword（事件）{
this.setState（{CertificatePassword:event.target.value}）；
}
handlechangetrantid（事件）{
this.setState（{TenantId:event.target.value}）；
}
上传前（文件）{
const isJPG=file.type=='image/jpeg'；
如果（！isJPG）{
message.error（'您只能上载JPG文件！'）；
}
}
handleupload（信息）{
//让files=e.target.files；
如果（info.file.status===‘上传’）{
this.setState（{loading:true}）；
返回；
}
如果（info.file.status===“完成”）{
this.setState（{loading:false}）；
this.setState（{'selectedFiles'：info.file}）；
}
}
状态={
confirmDirty:false，
加载：false，
};
handleSubmit（e）{
e、 预防默认值（）；
this.props.form.validateFieldsAndScroll（（错误，值）=>{
如果（！err）{
/*通知(
“成功”，
“形式的接收值”，
stringify（值）
);*/
let data=new FormData（）；
//将文件附加到表单数据
data.append（“model”，JSON.stringify（{“TenantId”：this.state.TenantId，“tenantur”：this.state.tenantur，“CertificatePassword”：this.state.CertificatePassword}））；
//data.append（“model”，{“TenantId”：this.state.TenantId，“tenantur”：this.state.tenantur，“TenantPassword”：this.state.TenantPassword}）；
让files=this.state.selectedFiles；
for（设i=0；iresponse.json（））
.然后（responseJson=>{
如果（！this.isCancelled）{
this.setState（{data:responseJson}）；
}
})
.catch（错误=>{
控制台错误（error）；
});
}
});      
}
render（）{
常量上载按钮=(
上传
);
const{getFieldDecorator}=this.props.form；
常量formItemLayout={
labelCol：{
xs:{span:24}，
sm:{span:6}，
},
包装纸：{
xs:{span:24}，
sm:{span:14}，
},
};
常量tailFormItemLayout={
包装纸：{
xs:{
跨度：24，
偏移量：0，
},
sm:{
跨度：14，
抵销：6，
},
},
};
返回(
{getFieldDecorator（'tenantid'{
规则：[
{
要求：正确，
消息：“请输入您的租户id”，
},
],
})()}
{getFieldDecorator（'certificatepassword'{
规则：[
{
要求：正确，
消息：“请输入您的密码！”，
}
],
})()}
{getFieldDecorator（'tenatadmissal'{
规则：[
{
要求：正确，
消息：“请输入您的租户管理员url！”，
}
],
})()}
点击上传
登记承租人
);
}
}
const WrappedRegisterTenantForm=Form.create（）（RegisterTenantForm）；
导出默认WrappedRegisterEntertForm；

您没有绑定

handleupload

功能。加上

this.handleupload = this.handleupload.bind(this)

在您的

RegisterTenantForm

构造函数中

或

您可以使用如下箭头函数重写

handleupload

函数：

handleupload = (info) => {
  //let files = e.target.files;
  if (info.file.status === 'uploading') {
    this.setState({ loading: true });
    return;
  }

  if (info.file.status === 'done') {
    // btw you dont need two separated setState here, you can do
    // it in one setState
    this.setState({
      'selectedFiles': info.file,
      loading: false
    });
  }
}

---

您没有绑定

handleupload

函数。加上

this.handleupload = this.handleupload.bind(this)

在你的<

adalApiFetch(fetch, "/Tenant", options)
  .then(response => response.json())
  .then(responseJson => {
    if (!that.isCancelled) {
      that.setState({
        data: responseJson
      });
    }
  })
  .catch(error => {
    console.error(error);
  });