如何禁用 React.js 中的按钮，直到一个或多个表单字段值更改？

Question

我在 React 组件中有一个表单：

import React, { useState, useRef, useEffect } from 'react';
import { useAuth } from './AuthContext';

export default function EditProfile() {
   //refs for form fields
   const nameRef = useRef();
   const hometownRef = useRef();
         .
         .
         .
   //refs for other fields in the form

   //state variable to store data fetched from database
   const [currentUserData, setCurrentUserData] = useState({});

   //context that has current user data
   const { currentUser } = useAuth();

  //useEffect to fetch data from database when component first mounts
    useEffect(() => {
          ... code that fetches user data ...
          setCurrentUserData(doc.data());
   
  }, []);

  
  function handleSubmitEditProfile(e) {
    e.preventDefault();

    var docRef = db.collection('users').doc(currentUser.uid);

    var updateDocuments = docRef
      .update({
        name: nameRef.current.value,
        school: schoolRef.current.value,
        currentCity: currentCityRef.current.value,
        hometown: hometownRef.current.value,
        hobbies: hobbiesRef.current.value,
      })
      .then(() => {
        console.log('Document successfully updated');
      });
  }

   return(
       <form onSubmit={handleSubmitEditProfile}>
                <div className='row'>
                  <div className='label'>
                    <label for='name'>Name</label>
                  </div>
                  <input
                    type='text'
                    name='name'
                    ref={nameRef}
                    defaultValue={currentUserData.displayName && currentUserData.displayName}
                  />
                </div>
                        .
                        .
                        .

                 <div className='row'>
                  <div className='label'>
                    <label for='hometown'>Hometown</label>
                  </div>
                  <input
                    type='text'
                    name='hometown'
                    ref={hometownRef}
                    defaultValue={
                      currentUserData.hometown && currentUserData.hometown
                    }
                  />
                </div>
                <button className='submit-btn' type='submit'>
                  Submit
                </button>
              </form>
   )
}

我已经根据从数据库中获取的数据填充了表单中的字段。用户可能在数据库中没有这些字段的值，并且可能是第一次输入数据以提交到数据库。

我希望在表单字段为空的情况下禁用提交按钮，并在用户在表单字段中输入数据时启用该按钮。如果表单字段中填充了来自数据库的数据，但其中 none 已被用户编辑，我还想禁用该按钮。可能有一个状态变量可以设置为 true 如果有空字段并且禁用按钮但是我如何设置它以也适用于上面提到的后一种情况？

Answer 1

您可以将禁用标签添加到按钮。

<button disabled={hometownRef.length < 5} ...

Answer 2

使用状态变量存储 true/false 按钮中禁用属性的值适用于这两种情况。我通过使用状态变量来存储字段值来进行更改。

const [name, setName] = useState('');
const [hometown, setHometown] = useState('');

//state to control the disabled attribute in the button
const [disabled, setDisabled] = useState(true);

并将输入 JSX 更改为：

                  <input
                    type='text'
                    name='name'
                    defaultValue={currentUser.displayName}
                    ref={nameRef}
                    onChange={(e) => {
                      setName(e.target.value);
                      setDisabled(false);
                    }}
                  />

当用户在字段中输入一些信息时，这会将禁用状态变量切换为 true（对 JSX 中的每个输入字段执行相同操作）。

在 handleSubmitEditProfile() 函数中更新数据库后，我添加了行

setDisabled(true);

将其切换回来，以便在提交表单后禁用该按钮。

如何禁用 React.js 中的按钮，直到一个或多个表单字段值更改？

How to disable a button in React.js until one or several form field value changes?

html

javascript

button

reactjs

disable