![](/img/trans.png)
[英]export default class Book extends Component VS export default Book
[英]class component to default export function
嗨,我需要帮助将此 class 组件迁移到默认导出 function,因为我的代码在默认导出 function 中,我需要帮助才能将其传递为 i 格式
import React, { Component } from "react";
export default class SingleImageUploadComponent extends Component {
constructor(props) {
super(props);
this.state = {
file: null
};
this.uploadSingleFile = this.uploadSingleFile.bind(this);
this.upload = this.upload.bind(this);
}
uploadSingleFile(e) {
this.setState({
file: URL.createObjectURL(e.target.files[0])
});
}
upload(e) {
e.preventDefault();
console.log(this.state.file);
}
render() {
let imgPreview;
if (this.state.file) {
imgPreview = <img src={this.state.file} alt="" />;
}
return (
<form>
<div className="form-group preview">{imgPreview}</div>
<div className="form-group">
<input
type="file"
className="form-control"
onChange={this.uploadSingleFile}
/>
</div>
<button
type="button"
className="btn btn-primary btn-block"
onClick={this.upload}
>
Upload
</button>
</form>
);
}
}
https://codesandbox.io/s/pedantic-brattain-irypt?file=/src/App.js
import React, { useState } from "react";
const SingleImageUploadComponent = () => {
const [file, setFile] = useState(null);
function uploadSingleFile(e) {
setFile(URL.createObjectURL(e.target.files[0]));
console.log("file", file);
}
function upload(e) {
e.preventDefault();
console.log(file);
}
return (
<form>
<div className="form-group preview">
{file && <img src={file} alt="" />}
</div>
<div className="form-group">
<input
type="file"
className="form-control"
onChange={uploadSingleFile}
/>
</div>
<button
type="button"
className="btn btn-primary btn-block"
onClick={upload}
>
Upload
</button>
</form>
);
};
export default SingleImageUploadComponent;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.