![](/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.