javascript - 无法读取表单中未定义的属性“道具”
问题描述
我有以下反应组件,但我找不到上述错误的原因,感谢帮助
import React, { Component } from 'react';
import { Input} from 'antd';
import Form from '../../components/uielements/form';
import Button from '../../components/uielements/button';
import Notification from '../../components/notification';
import { adalApiFetch } from '../../adalConfig';
const FormItem = Form.Item;
class CreateSiteCollectionForm extends Component {
constructor(props) {
super(props);
this.state = {Alias:'',DisplayName:'', Description:''};
this.handleChangeAlias = this.handleChangeAlias.bind(this);
this.handleChangeDisplayName = this.handleChangeDisplayName.bind(this);
this.handleChangeDescription = this.handleChangeDescription.bind(this);
};
handleChangeAlias(event){
this.setState({Alias: event.target.value});
}
handleChangeDisplayName(event){
this.setState({DisplayName: event.target.value});
}
handleChangeDescription(event){
this.setState({Description: event.target.value});
}
handleSubmit(e){
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
let data = new FormData();
//Append files to form data
data.append(JSON.stringify({"Alias": this.state.Alias,
"DisplayName": this.state.DisplayName,
"Description": this.state.Description
}));
const options = {
method: 'post',
body: data,
config: {
headers: {
'Content-Type': 'multipart/form-data'
}
}
};
adalApiFetch(fetch, "/SiteCollections", options)
.then(response =>{
if(response.status === 204){
Notification(
'success',
'Site collection created',
''
);
}else{
throw "error";
}
})
.catch(error => {
Notification(
'error',
'Site collection not created',
error
);
console.error(error);
});
}
});
}
render() {
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="Alias" hasFeedback>
{getFieldDecorator('Alias', {
rules: [
{
required: true,
message: 'Please input your alias',
}
]
})(<Input name="alias" id="alias" onChange={this.handleChangeAlias} />)}
</FormItem>
<FormItem {...formItemLayout} label="Display Name" hasFeedback>
{getFieldDecorator('displayname', {
rules: [
{
required: true,
message: 'Please input your display name',
}
]
})(<Input name="displayname" id="displayname" onChange={this.handleChangedisplayname} />)}
</FormItem>
<FormItem {...formItemLayout} label="Description" hasFeedback>
{getFieldDecorator('description', {
rules: [
{
required: true,
message: 'Please input your description',
}
],
})(<Input name="description" id="description" onChange={this.handleChangeDescription} />)}
</FormItem>
<FormItem {...tailFormItemLayout}>
<Button type="primary" htmlType="submit">
Create modern site
</Button>
</FormItem>
</Form>
);
}
}
const WrappedCreateSiteCollectionForm = Form.create()(CreateSiteCollectionForm);
export default WrappedCreateSiteCollectionForm;
解决方案
只需为您的处理程序使用箭头函数即可避免this
上下文问题。
根据MDN 网络文档:
箭头函数表达式的语法比函数表达式短,并且没有自己的 this、arguments、super 或 new.target。
因此,在您的组件中:
<Form onSubmit={(e) => this.handleSubmit(e)}>
...
onChange={(e) => this.handleChangeAlias(e)}
...
onChange={(e) => this.handleChangedisplayname(e)}
...
onChange={(e) => this.handleChangeDescription(e)}
而且,不要在构造函数中绑定:
constructor(props) {
super(props);
this.state = {Alias:'',DisplayName:'', Description:''};
};
内联函数和箭头函数的问题
关于这个主题的文章很多,我不想在这里开始争论,因为它已经争论了很久了。
如果您在使用此解决方案重新渲染时遇到问题,但认为箭头函数更容易(编写、阅读、理解、绑定等),请查看Reflective-bind,它以非常有效的方式解决了这个问题简单的方法。
这些文章对于很好地理解内联函数和箭头函数的作用以及为什么应该在项目中使用或不使用它们非常重要:
推荐阅读
- python - 无法使用 sqlalchemy 建立连接 SQL Server
- python - 查找从一个顶点到另一个顶点的所有路径
- javascript - 对象属性名称在混淆的 js 中被破坏并且无法检索它
- identityserver4 - 身份服务器在内存中自定义 IdentityResources
- gatsby - Netlify TOML 中的 netlify-cli 设置 ID
- icons - 如何插入付款徽标 opencart 页脚
- c++ - 获取函数调用者的地址?
- jquery - 如何在xml中检索跨源火山数据?
- android - SDL_RenderCopy 仅在 Android 上显示第一张图像?
- git - git - 某些文件不是最新的远程提交