我正在使用 React Apollo graphql 从 UI 获取数据,在这里我从后端获取数据并上传图像,然后有一个按钮(编辑),单击该按钮我使字段可编辑,以便用户可以上传新图像。
问题
编辑时单击我有两个按钮编辑和取消
问题是当我单击“取消”时,它没有拍摄初始图像。
我正在做的是
const [file, setfile] = useState('');
const [filename, setfilename] = useState('Chose file');
const [canCeldata, setcanCeldata] = useState(null);
const [disabled, setdisabled] = useState(true);
const [edit, setedit] = useState(false);
const [formData, setFormdata] = useState(false);
const { loading, error, data } = useQuery(Get_img);
useEffect(() => {
if (data) {
setFormdata(data.getImage);
setcanCeldata(data.getImage);
}
}, [data]);
if (loading) return <div>Loadinf</div>;
if (error) return <div>Error</div>;
const onChange = (e) => {
// setfile(e.target.files[0]);
// setfilename(e.target.files[0].name);
let file = e.target.files;
let reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = (e) => {
// console.log(e.target.result);
formData.img_url = URL.createObjectURL(file[0]);
setfile(e.target.result);
};
};
const Edit = () => {
setdisabled(false);
setedit(true);
};
const cancel = () => {
console.log(data);
setFormdata(canCeldata);
setdisabled(true);
setedit(false);
};
<form>
{edit === false && (
<button className="btn btn-primary" type="button" onClick={Edit}>
Edit
</button>
)}
{edit === true && (
<div>
<button className="btn btn-primary" type="button">
Save
</button>
<button className="btn btn-primary" type="button" onClick={cancel}>
Cancel
</button>
</div>
)}
<br />
<div className="custom-file">
<input
disabled={disabled}
type="file"
accept="image/png, image/jpeg"
className="custom-file-input"
id="customFile"
onChange={onChange}
/>
<label className="custom-file-label" htmlFor="customFile">
{filename}
</label>
<br />
<br />
<button
disabled={disabled}
type="button"
className="btn btn-secondary btn-block"
onClick={save_img}>
Submit
</button>
</div>
</form>
<img src={formData.img_url} className="test_img" />
</div>
取消单击时会显示问题,因为 url 正在更改,我正在使用 URL.createObjectURL
这个正在改变url
为了便于理解,我在这里提供静态数据。
let data = {
"id": "1",
"img_url":
"https://storage.blob.core.windows.net/testimageupload/test.png"
}
工作代码
最佳答案
您正在直接改变 formData,这不是钩子(Hook)中的正确方法。您应该使用 set 函数来更改您定义的任何状态。下面是工作代码,我也提到了更改
/** @format */
import React, { useState, useEffect } from "react";
function Device_register() {
const [file, setfile] = useState("");
const [filename, setfilename] = useState("Chose file");
const [canCeldata, setcanCeldata] = useState(null);
const [disabled, setdisabled] = useState(true);
const [edit, setedit] = useState(false);
const [formData, setFormdata] = useState(false);
let data = {
id: "1",
img_url: "https://picsum.photos/200/300"
};
useEffect(() => {
if (data) {
setFormdata(data);
setcanCeldata(data);
}
}, []);
console.log(JSON.stringify(data));
const onChange = e => {
let file = e.target.files;
let reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = e => {
// console.log(e.target.result);
// CHANGES DONE HERE
let newForm = Object.assign({},formData);
newForm.img_url = URL.createObjectURL(file[0]);
setFormdata(newForm);
//formData.img_url = URL.createObjectURL(file[0]);
// CHANGES END
setfile(e.target.result);
};
};
const save_img = () => {
alert("j");
};
const Edit = () => {
setdisabled(false);
setedit(true);
};
const cancel = () => {
console.log(data);
setFormdata(canCeldata);
setdisabled(true);
setedit(false);
};
return (
<div className="container">
<form>
{edit === false && (
<button className="btn btn-primary" type="button" onClick={Edit}>
Edit
</button>
)}
{edit === true && (
<div>
<button className="btn btn-primary" type="button">
Save
</button>
<button className="btn btn-primary" type="button" onClick={cancel}>
Cancel
</button>
</div>
)}
<br />
<div className="custom-file">
<input
disabled={disabled}
type="file"
accept="image/png, image/jpeg"
className="custom-file-input"
id="customFile"
onChange={onChange}
/>
<label className="custom-file-label" htmlFor="customFile">
{filename}
</label>
<br />
<br />
<button
disabled={disabled}
type="button"
className="btn btn-secondary btn-block"
onClick={save_img}
>
Submit
</button>
</div>
</form>
<img src={formData.img_url} className="test_img" />
</div>
);
}
export default Device_register;
关于javascript - 如何在 react 中点击时填充初始数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62777645/