为什么我的事件处理函数未定义?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为什么我的事件处理函数未定义?相关的知识,希望对你有一定的参考价值。
我一直在浏览器控制台中得到以下错误信息。
**
handleSubmit phlogEditor错误 TypeError._this4.props.handleNewPhlogSubmission不是phlog-editorMach2.js:142处的函数。_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;
答案
请更新 this.state.handleNewPhlogSubmission
到 this.handleNewPhlogSubmission
同时将函数作为道具传递给子组件
以上是关于为什么我的事件处理函数未定义?的主要内容,如果未能解决你的问题,请参考以下文章
getSupportFragmentManager() 在活动扩展片段中未定义
作为 SQS 事件处理程序的 Lambda 函数未运行部分代码并成功完成