如何使用 React JS 更改要启用的输入

如何解决如何使用 React JS 更改要启用的输入

function EditServiceDetails(props) {
    const [name,setName] = useState(props.item.name);
    const [enabled,setEnabled] = useState('disabled');
    const [read,setRead] = useState(true);

    const changeName = (e) => {
        setName({ name: e.target.value });
    };

    const edit = () => {
        console.log("HI")
        setRead({ read: false });
        setEnabled({ enabled: '' });
    }

    return (
        <div>
            <div className='edit' onClick={edit}>Edit</div>
            <br />
                <label htmlFor='editSName'> Name :</label>
                <input type='text' id='editSName' name='editSName' defaultValue={name} onChange={changeName} readOnly={read} />
        </div>
    );
}

我想在用户单击“编辑”时启用输入，我使用了“读取”和“启用”钩子，如上所述..但是当我单击编辑时，输入仍然被禁用，有什么建议吗？

解决方法

您需要更新 setRead({ read: false }); 成为 setRead(false);

,

查看输入元素的 disabled 属性。

然后你可以在你的状态中有一个值，但不是调用它 enabled，你可以调用它 disabled 并使用一个布尔值作为这个值并将其设置为 true。

然后输入元素中的 disabled 属性由该值指定。 <input type='text' id='editSName' name='editSName' defaultValue={name} onChange={changeName} disabled={disabled} />

然后在 edit() 函数中设置状态：

setDisabled(false)