上传图像并更改背景

Question

每当用户上传图像时，我都在尝试进行背景更改，但是默认设置了背景，但是，我发现我必须使用＆lt; input /＆gt; < /code>，但是后来我被卡住了

这是我到目前为止的工作！

const [backgroundShown, setBackgroundShown] = useState(false);

---

const changeBackground = () => {

        setBackgroundShown(!backgroundShown);
      };

---

        {file && (
                <img
                    className="writeImg"
                    src={URL.createObjectURL(file)}
                />
            )
        }
        <form className="writeForm" onSubmit={handlerSubmit}>
            <div className="writeFormGroup">
                <label htmlFor="fileInput">
                    <img 
                    type={backgroundShown ? "img" : "file"}
                    className="writeIcon"
                    src="/Images/Upload-Vector.png"
                    ></img>
                </label>
                <div>
                <input 
                onClick={changeBackground}
                type={backgroundShown ? "file" : "img"}
                accept="image/*"
                id="fileInput" 
                style={{ display: "none" }} 
                onChange={e => setFile(e.target.files[0])}>
                </input>
                </div>

Answer 1

听起来您想在用户“上传”时删除按钮。

如果是这样，只需在没有上传上载用户时将其渲染。

  {file && (
                <img
                    className="writeImg"
                    src={URL.createObjectURL(file)}
                />
            )
        }
   {!file && 
        <form className="writeForm" onSubmit={handlerSubmit}>
            <div className="writeFormGroup">
                <label htmlFor="fileInput">
                    <img 
                    type={backgroundShown ? "img" : "file"}
                    className="writeIcon"
                    src="/Images/Upload-Vector.png"
                    ></img>
                </label>
                <div>
                <input 
                onClick={changeBackground}
                type={backgroundShown ? "file" : "img"}
                accept="image/*"
                id="fileInput" 
                style={{ display: "none" }} 
                onChange={e => setFile(e.target.files[0])}>
                </input>
                </div>
    }