Question

如果用户没有选择照片，我想为不同的卡片设置样式。如果他们选择了一张照片，那么我想要一个width: 600px，但如果不想要，我不希望该图像缩略图出现，我想要一个width的{{1}}，并且我只想显示如果用户未上传照片，则输入文本。我怎么知道用户是否选择了照片？请帮忙。

这是代码：

300px

Answer 1

拍张照片是什么意思？

但是从我可以从代码中看出来，您可以执行以下操作

const [photoPicked, setPhotoPicked] = useState(false)

//在某个地方调用setPhotoPicked来切换上面的状态

return (
    <div>
        <div className="card" style={{ width: photoPicked ? '600px' : '300px' }} key={i}>
        <div className="card-body">

        <img 
            src={`${process.env.REACT_APP_API_URL}/post/photo/${post._id}`}
            alt={post.title}
            className="img-thumbnail mr-4 float-left rounded mb-3"
            style={{ height: "400px", width: "300px", objectFit: "fill" }}
        />

        <p className="card-text" style={{ color: "#darkslategray", fontSize: "15px" }}>
        {post.body.substring(0, 50)}
        </p>
        <br />
    </div>

)

基本上，您需要将photoPicked的状态设置为true或false，然后根据该状态更改宽度

Answer 2

您可以为此目的使用图像的onLoad事件，也应该在onError事件中添加一些逻辑。如果要在图像元素中显示选定的图像，可以使用URL.createObjectURL。

如果您认为isPicked是在someLogic和loadLogic中突变的状态。

<image src={isPicked && URL.createObjectURL(file.data)} onError={someLogic} onLoad={loadLogic} />

例如：

const [imageSrcIsSet, setImageSrcIsSet] = useState(true);

<Card style={{ width: imageSrcIsSet ? "600px" : "300px" }} > 
<img src={imageSrcProperty} style={{ width: imageSrcIsSet ? "300px" : "0px" }} onError={()=> setImageSrcIsSet(false)} onLoad={() => setImageSrcIsSet(true)} /> 
</Card>

Answer 3

  const [image, setImage] = useState('');  

    const [previewImage, setPreviewImage] = useState();          


 <label htmlFor="image">Image</label>
                    <input 
                    type="file" 
                    name="image"
                    onChange={fileUploadHandler}
                    />

                    <img src={previewImage} className={styles.previewImage}/>

这是更改图像值的功能

const fileUploadHandler = (e) => {
        const url = e.target.files[0];
        setImage(url);
        const fileReader = new FileReader();
        fileReader.readAsDataURL(url);
        fileReader.onload = () => {
            setPreviewImage(fileReader.result);
        };
    };

如何检查用户是否上传了照片ReactJs

3 个答案: