輸入不會改變 reactjs 中的值

Question

問題

我正在使用 reactjs 和 graphql 與 apollo 客戶端進行項目。 我正在嘗試通過 id 獲取用戶並且它有效，該值以模式形式顯示。

但是，我無法刪除或添加表單輸入中的文本或內容。

我正在使用 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;

問題我如何編輯表單輸入？

任何幫助將不勝感激，謝謝

Answer 1

您輸入的value支柱導致了這個問題。 與其將value直接綁定到dataUser.address等，不如將它們設置為value.address等。

至於顯示用戶的數據，你應該 map 創建 state 時的值。

您的 state 應如下所示：

const [value, setValue] = useState({
  full_name: dataUser.full_name,
  email: dataUser.email,
  phone: dataUser.phone
  address: dataUser.address,
  password: dataUser.password,
  group_id: dataUser.group_id,
});

您的輸入應如下所示：

<Form.Control name="full_name" value={value.full_name} onChange= {onChange} />