• • 问题**

我正在用reactjs和graphql和apollo客户端做一个项目，我试着用id来获取用户，它工作了，值显示在modal表单中。

但是，我不能删除或添加表单输入中的文本或内容。
我正在使用onChange处理程序，但它不起作用。

import React, { useEffect, useState } from "react";
import { useMutation, useQuery } from "@apollo/client";
import { Button, Modal, Form } from "react-bootstrap";

import { GET_USER_BY_ID } from "../../../gql/query";

const ModalEdit = (props) => {
    // state for check input component
    const [isChecked, setIsChecked] = useState('ACTIVE');
    const [value, setValue] = useState({
      full_name: "",
      email: "",
      phone: "",
      address: "",
      password: "",
      group_id: "",
    });

    useEffect(() => {
        if (props.show) {
        document.body.classList.add("modal-open");
        }

        return () => {
            if (document.body.classList.contains("modal-open")) {
                document.body.classList.remove("modal-open");
            }
        };
  }, [props.show]);

  const { data, loading, error } = useQuery(GET_USER_BY_ID, {
    variables: { username: props.username },
  });

  const dataUser = data?.getUserByID;

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  const onChange = (event) => {
    setValue({
      ...value,
      [event.target.name]: event.target.value
    })
  }

  return (
    <Modal show={props.show}>
      <Modal.Header>
        <Modal.Title> <span>FORMULIR AKUN PENGGUNA</span> </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form>
            <Form.Group className="mb-3">
                <Form.Label>Role Akun</Form.Label>
                <Form.Select aria-label="pilih user role">
                    <option>{dataUser.group_id}</option>
                    <option>Admin RJ</option>
                </Form.Select>
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Nama Lengkap</Form.Label>
                <Form.Control name="full_name" value={dataUser.full_name} onChange= {onChange} />
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Email</Form.Label>
                <Form.Control type="email" name="email" value={dataUser.email} onChange={ onChange }/>
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Phone</Form.Label>
                <Form.Control type="text" name="phone" value={dataUser.phone} onChange={ onChange } />
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Address</Form.Label>
                <Form.Control type="text" name="address" value={dataUser.address} onChange={ onChange } />
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" name="password" value={dataUser.password} onChange={ onChange } />
            </Form.Group>
            <Form.Label>Aktifkan Akun</Form.Label>
            {dataUser.status === 'ACTIVE' ? (  
            <Form.Check 
                type="switch"
                checked={isChecked}
                onChange={(event) => setIsChecked(event.target.checked)}
                id="custom-switch"
                label="Aktifkan Akun"
            /> ) :  (
                <Form.Check 
                    type="switch"
                    id="custom-switch"
                    checked={isChecked}
                    onChange={(event) => setIsChecked(event.target.checked)}
                    label="Aktifkan Akun"
                />
            )}       
        </Form>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="primary" type="submit" >Submit</Button>
        <Button variant="secondary" onClick={props.onClose}>
          Close
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default ModalEdit;

• • 问题**如何编辑表单输入？

有任何帮助我们都很感激，谢谢