如何在 react js 中创建函数组件的新实例?

Question

我正在尝试使用相同的组件在我的 Web 应用程序的不同位置上存储 2 个图像输入。 考考：

function App() {
return (
<div className="App">
<header className="App-header">
<UploadImage/>
<UploadImage/>
</header>
</div>
);
}

当我在一个组件中上传图像时，ID 会覆盖另一个组件并仅在第一个组件上显示图像。

上传图像组件：

import React, { useState } from 'react'
export default function UploadImage(props) {
const [image, setImage] = useState({ image: { preview: null, raw: null } });
return (
<div>
<label htmlFor="upload-button">
{image.preview ?
<img src={image.preview} style={{ maxWidth: 250, maxHeight: 250 }} alt={"image"} />
: <p className="text-center">Add image</p>
}
</label>
<input
type="file"
id="upload-button"
style={{ display: 'none', border: "5px solid red" }}
onChange={e => setImage({
preview: URL.createObjectURL(e.target.files[0]),
raw: e.target.files[0]
})}
required
/>
</div>
)
}

Answer 1

您有两个 id="upload-button" 的输入，以及两个带有 htmlFor="upload-button" 的标签。要按预期运行，输入应具有唯一 ID，以便它们可以可靠地与标签关联。尝试将唯一值作为 props 传递：

import React from "react";
import UploadImage from "./UploadImage";
export default function App() {
return (
<div className="App">
<header className="App-header">
<UploadImage inputId="image-upload-1" />
<UploadImage inputId="image-upload-2" />
</header>
</div>
);
}

import React, { useState } from "react";
export default function UploadImage(props) {
const [image, setImage] = useState({ image: { preview: null, raw: null } });
return (
<div>
<label htmlFor={props.inputId}>
{image.preview ? (
<img
src={image.preview}
style={{ maxWidth: 250, maxHeight: 250 }}
alt={"im"}
/>
) : (
<p className="text-center">Add image</p>
)}
</label>
<input
type="file"
id={props.inputId}
style={{ display: "none", border: "5px solid red" }}
onChange={e =>
setImage({
preview: URL.createObjectURL(e.target.files[0]),
raw: e.target.files[0]
})
}
required
/>
</div>
);
}

工作沙盒示例：https://codesandbox.io/s/modest-christian-lb9d4?file=/src/UploadImage.js