Блог

Я изучаю reactjs, и это мой самый первый код. После щелчка поля ввода будут отключены, однако, когда я нажму «Включить», поля все еще будут отключены. Как я могу это исправить?

 import React,{useState} from 'react';
import '../css/formContact.css';


export function Contact(){

    const [isDisabled, setDisabled] = useState(false);

    function handleDisabling(){
        setDisabled({isDisabled : true})
    }

    function handleEnabling(){
        setDisabled({isDisabled : false})
    }

    return(
        <div id = 'contact'>
            <h2>Contact</h2>
            <div className = 'form-contact'>
                <span>Name: <input type = 'text' disabled={isDisabled}/></span>
                <span>Surname: <input type = 'text'disabled={isDisabled}/></span>
                <span>Address: <input type = 'text'disabled={isDisabled}/></span>
                <span>G.P.A.: <input type = 'text'disabled={isDisabled}/></span>
                { isDisabled 
                    ? <button className = 'btn-add-date' onClick={() => handleEnabling()}>Enable</button>
                    : <button className = 'btn-add-date' onClick={() => handleDisabling()}>Disable</button>
                }
            </div>
        </div>
    )
}
 

Проблема решена:

   function handleEnabling(){
        setDisabled(false)
    }
 

setDisabled(true) вместо setDisable({ isDisabled : true }) будет работать

Вы передаете неправильные аргументы функции обновления состояния (в вашем случае setDisabled(…)). В отличие от компонентов класса, вам не нужно передавать новое значение в качестве объекта. Просто передайте значение как есть. в вашем случае вы должны использовать

 function handleDisabling() {
  setDisabled(true);
}

function handleEnabling() {
  setDisabled(false);
}
 

вот рабочая версия вашего кода Codesandbox