如何在点击时填充初始数据

发布时间：2020-07-07 14:32

我正在研究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

这个正在更改网址

为便于理解，我在这里提供我的静态数据。

   let data = {
       "id": "1",
       "img_url": 
   "https://storage.blob.core.windows.net/testimageupload/test.png"
     }

工作代码

Code sandbox link

回答1

我认为您的问题是，当用户第一次编辑表单时，您没有保存import re from string import punctuation ppt = '''...!@#$%^&*()....{}[]|._-`/?:;"'\,~12345678876543''' def processTweet(tweet): ''' parameters: ==================== - tweets: list of text functions: ==================== - Remove HTML special entities (e.g. &) - Convert @username to AT_USER - Remove tickers - convert to lowercase - Remove hyperlinks - Remove hashtags - Remove Punctuation and split 's, 't, 've with a space for filter ''' # Remove HTML special entities (e.g. &) tweet = re.sub(r'\&\w*;', '', tweet) #Convert @username to AT_USER tweet = re.sub('@[^\s]+','',tweet) # Remove tickers tweet = re.sub(r'\$\w*', '', tweet) # To lowercase tweet = tweet.lower() # Remove hyperlinks tweet = re.sub(r'https?:\/\/.*\/\w*', '', tweet) # Remove hashtags tweet = re.sub(r'#\w*', '', tweet) # Remove Punctuation and split 's, 't, 've with a space for filter tweet = re.sub(r'[' + ppt.replace('@', '') + ']+', ' ', tweet) return tweet。尝试将cancelData处理程序设置为-

Edit

回答2

您正在直接更改formData，这不是钩子中的正确方法。您应该使用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;