Javascript 如何在使其可编辑后写入内部输入？

我正在从JSON数据中填充输入字段的值，从后端获得的数据，现在UI上有一个编辑按钮，单击该按钮，我正在启用输入字段，但无法在其中键入，因为我正在设置一些值

我想在我将输入设置为可编辑后在输入中写入

const { register, handleSubmit, errors } = useForm();
  const [disabled, setdisabled] = useState(false);
  const [editBtn, seteditBtn] = useState(true);
     <form onSubmit={handleSubmit(onSubmit)}>
        {editBtn === true && (
          <div align="right">
            <button
              className="btn white_color_btn"
              type="button"
              onClick={edit}
            >
              Edit
            </button>
          </div>
        )}
        {editBtn === false && (
          <button className="btn white_color_btn" type="submit">
            Save
          </button>
        )}

        <div className="row">
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              disable
              id="firstName"
              name="firstName"
              value={dataItems.firstname}
              disabled={disabled ? "" : "disabled"}
              ref={register({ required: true })}
            />
            {errors.firstname && (
              <span className="text-danger">first name required</span>
            )}
            <br />
            <label htmlFor="emp_designation">First name</label>
          </div>
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              disabled
              id="lastname"
              name="lastname"
              value={dataItems.lastname}
              disabled={disabled ? "" : "disabled"}
              ref={register({ required: true })}
            />
            {errors.lastname && (
              <span className="text-danger">last name required</span>
            )}
            <br />
            <label htmlFor="lastname">Lastname</label>
          </div>
        </div>
      </form>

---

您的输入由您给它的值控制。ie：其值始终是例如

empData.item.name

并且您没有提供变更处理程序来处理变更

尝试添加如下内容：

function myChangeHandler(e){
  setEditedValueSomeHow(e.target.value);
}

<input
  // ...
  onChange={myChangeHandler}
/>

---

下面是一个

您需要将输入作为一个受控组件，并编写onChange处理程序来更新状态。这将允许您编辑输入字段值

const[disabled，setdisabled]=useState（false）；
const[name，setName]=useState（empData.item.name）//设置默认名称
const[lastname，setLastname]=useState（empData.item.lastname）//默认lastname
常量编辑=（）=>{
setdisabled（true）；
};
返回(
编辑
{
setName（例如target.value）
}}
disabled={disabled？”：“disabled”}
/>


名称
{
setLastname（e.target.value）
}}
disabled={disabled？”：“disabled”}
/>


姓氏
);

为了使输入可编辑，您需要更新控制输入值的本地状态。正如您在评论中所建议的，您正在使用graphql获取数据，您可以使用useEffect将数据设置为状态，然后单击edit，更新localState

export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const [disabled, setdisabled] = useState(true);
  const [editBtn, seteditBtn] = useState(true);
  const { loading, data } = useQuery("some qraphql query here"); // getting data from graphql
  const [formData, setFormData] = useState({});

  useEffect(() => {
    setFormData(data);
  }, [data]);

  const edit = () => {
    setdisabled(false);
    seteditBtn(false);
  };

  const onSubmit = () => {
    console.log(formData);
    // submit data using formData state.
  };

  const handleChange = e => {
    const name = e.target.name;
    const value = e.target.value;
    console.log(name, value);
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <div className="container-fluid">
      <form onSubmit={handleSubmit(onSubmit)}>
        {editBtn === true && (
          <div align="right">
            <button
              className="btn white_color_btn"
              type="button"
              onClick={edit}
            >
              Edit
            </button>
          </div>
        )}
        {editBtn === false && (
          <button className="btn white_color_btn" type="submit">
            Save
          </button>
        )}

        <div className="row">
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              id="firstname"
              name="firstname"
              onChange={handleChange}
              value={formData.firstname}
              disabled={disabled}
              ref={register({ required: true })}
            />
            {errors.firstname && (
              <span className="text-danger">first name required</span>
            )}
            <br />
            <label htmlFor="emp_designation">First name</label>
          </div>
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              id="lastname"
              name="lastname"
              value={formData.lastname}
              onChange={handleChange}
              disabled={disabled}
              ref={register({ required: true })}
            />
            {errors.lastname && (
              <span className="text-danger">last name required</span>
            )}
            <br />
            <label htmlFor="lastname">Lastname</label>
          </div>
        </div>
      </form>
    </div>
  );
}

导出默认函数App（）{
常量{register，handleSubmit，errors}=useForm（）；
const[disabled，setdisabled]=使用状态（true）；
const[editBtn，seteditBtn]=useState（true）；
const{loading，data}=useQuery（“此处的某些qraphql查询”）；//从graphql获取数据
const[formData，setFormData]=useState（{}）；
useffect（（）=>{
setFormData（数据）；
}，[数据]；
常量编辑=（）=>{
setdisabled（假）；
seteditBtn（假）；
};
const onSubmit=（）=>{
console.log（formData）；
//使用formData状态提交数据。
};
常量handleChange=e=>{
const name=e.target.name；
常量值=e.target.value；
console.log（名称、值）；
setFormData（prev=>（{…prev[name]：value}））；
};
返回(
{editBtn===true&&(
编辑
)}
{editBtn===false&&(
拯救
)}
{errors.firstname&&(
需要名字
)}


名字
{errors.lastname&&(
需要姓氏
)}


姓氏
);
}

---

我无法最初提供状态，因为我在顶层使用钩子定义我的状态，而我的数据在此之后出现，所以不能这样做。等一下，我将使用代码和框链接编辑我的帖子。这对我没有帮助，因为我必须在顶层定义useForm钩子，而我的数据随后出现，对于mor澄清，我使用

react apollo graphql

获取数据，因此我必须先检查错误并加载，然后我获取数据，因此如果我在使用表单中初始化数据，它将是未定义的，或者如果我在加载和出错后定义我的使用表单，它将抛出错误作为react钩子“useForm”如果你有两个选择：1。编写自己的表单管理。2.将两个组件分开：一个包含错误和初始状态（未加载），另一个包含数据时：（我只能这样做，谷歌会四处搜索并找到一些东西吗？我得到了你的答案，我只能这样做，但我想澄清一件事，现在你在使用表单中插入使用默认值的valies，但那时我没有数据，所以我可以使用

useffect

所以当从后台（API）加载数据时然后我可以在useForm中传递值，请在我理解这个情况并且我不知道react-hook表单是否提供了一种改变值的必要方式时进行指导，我建议您使用两个组件：-NodeDataComponent和WithDataComponent，WithDataComponent使用从道具接收的默认值初始化useForm。我认为避免更改初始化的useForm值的方法当您声明要从后端获取值时，您是否实际进行API调用以获取同一组件或另一组件中的数据。此外，单击“提交”后，您将需要将数据提交到后端，并且仍保持正确的格式状态？@ShubhamKhatri yup I am ge正在检查同一组件中是否允许用户编辑来自后端的数据，然后仅显示编辑按钮，然后单击使其更改保存，单击保存时是要将数据保存到服务器（后端）@ShubhamKhatri我正在使用

graphql

获取API，在graphql中提交时，有一个方法

refetchQueries

，我将通过该方法运行查询，该查询将填充数据，并用最新的更改填充我的UI。请在相应的查询中添加一个答案。考虑到逻辑基本上是错误的，如果您需要更多帮助，请告诉我由你如何获取数据决定，提供一个codesandbox有点棘手。但我肯定可以添加一个模拟演示。但是帖子中的上述代码应该足以让你编辑你的原始代码。我得到了它，不需要显示演示，现在useEffect将解决我所遇到的困难，让我用我真正的API测试一下。我添加了一个模拟演示在任何情况下，在你的原始代码沙盒中都有某些输入错误。用useEffect逻辑更新了它嘿，你在那里，我有一个

const { register, handleSubmit, errors } = useForm({
    defaultValues: {
      firstName: "steve",
      lastname: "smith"
    }
  });

const [disabled, setdisabled] = useState(false);
  const [name, setName] = useState(empData.item.name) // setting default name 
  const [lastname, setLastname] = useState(empData.item.lastname) // default lastname

  const edit = () => {
    setdisabled(true);
  };

  return (<div className="container-fluid">
    <div align="right">
      <button className="btn" onClick={edit}>
        Edit
      </button>
    </div>
    <div className="row">
      <div>
        <input
          type="text"
          disable
          id="item.value"
          value={name}
          onChange={(e) => {
            setName(e.target.value)
          }}
          disabled={disabled ? "" : "disabled"}
        />
        <br />
        <label htmlFor="name">Name</label>
      </div>
      <div>
        <input
          type="text"
          disabled
          id={"lastname"}
          value={lastname}
          onChange={(e) => {
            setLastname(e.target.value)
          }}
          disabled={disabled ? "" : "disabled"}
        />
        <br />
        <label htmlFor="lastname">Lastname</label>
      </div>
    </div>
  </div>);

export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const [disabled, setdisabled] = useState(true);
  const [editBtn, seteditBtn] = useState(true);
  const { loading, data } = useQuery("some qraphql query here"); // getting data from graphql
  const [formData, setFormData] = useState({});

  useEffect(() => {
    setFormData(data);
  }, [data]);

  const edit = () => {
    setdisabled(false);
    seteditBtn(false);
  };

  const onSubmit = () => {
    console.log(formData);
    // submit data using formData state.
  };

  const handleChange = e => {
    const name = e.target.name;
    const value = e.target.value;
    console.log(name, value);
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <div className="container-fluid">
      <form onSubmit={handleSubmit(onSubmit)}>
        {editBtn === true && (
          <div align="right">
            <button
              className="btn white_color_btn"
              type="button"
              onClick={edit}
            >
              Edit
            </button>
          </div>
        )}
        {editBtn === false && (
          <button className="btn white_color_btn" type="submit">
            Save
          </button>
        )}

        <div className="row">
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              id="firstname"
              name="firstname"
              onChange={handleChange}
              value={formData.firstname}
              disabled={disabled}
              ref={register({ required: true })}
            />
            {errors.firstname && (
              <span className="text-danger">first name required</span>
            )}
            <br />
            <label htmlFor="emp_designation">First name</label>
          </div>
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              id="lastname"
              name="lastname"
              value={formData.lastname}
              onChange={handleChange}
              disabled={disabled}
              ref={register({ required: true })}
            />
            {errors.lastname && (
              <span className="text-danger">last name required</span>
            )}
            <br />
            <label htmlFor="lastname">Lastname</label>
          </div>
        </div>
      </form>
    </div>
  );
}