Unë jam duke punuar me forma në React, duke përdorur komponentët e funksionit për herë të parë. Ose do të çmendem, ose kjo duhet të funksionojë pa asnjë problem...
import React, {useEffect, useState} from 'react';
function ChangePasswordComponent(props) {
const {onChangePassword} = props;
const [isValid, setIsValid] = useState(true);
const [form, setForm] = useState({
password: undefined,
confirm: undefined
})
useEffect(() => {
handleValidation();
}, [form])
function handleValidation() {
setIsValid(form.password === form.confirm);
}
function onFormValueChanges(event) {
setForm({...form, [event.target.name]: event.target.value})
}
function resetFields() {
setForm({
password: undefined,
confirm: undefined
})
}
function onUpdateClick() {
onChangePassword(form.password);
resetFields();
}
return (
<div className="change-password-container">
<input
type="text"
name="password"
value={form.password}
onChange={(event) => onFormValueChanges(event)}
placeholder="new password" />
<input
type="text"
name="confirm"
value={form.confirm}
onChange={(event) => onFormValueChanges(event)}
placeholder="confirm new password" />
{!isValid ?
<span className="validation-error">passwords do not match</span> : null }
<div className="button-container">
<button onClick={() => resetFields()}>Cancel</button>
<button onClick={() => onUpdateClick()}
disabled={!form.password || !isValid}>Update</button>
</div>
</div>
);
}
export default ChangePasswordComponent;
Sidoqoftë, kur ekzekutoj kodin, marr një gabim në tastierë rreth ...
Një komponent po ndryshon një hyrje të pakontrolluar të llojit të tekstit që do të kontrollohet. Elementet hyrëse nuk duhet të kalojnë nga të pakontrolluar në të kontrolluar (ose anasjelltas). Vendosni midis përdorimit të një elementi hyrës të kontrolluar ose të pakontrolluar për jetëgjatësinë e komponentit.
Kur shikoj përsëri në dokumentacion, modeli im duket se ndjek mirë Dokumentet. Mendimet?