我有一個專案只允許我更改這個檔案（下面的檔案）。其他檔案已經完成，所以這里就不放了（也不加長代碼）。我的問題只是關于此檔案中驗證的兩種方法的實作。
命令：
在第一次關注輸入期間不會顯示錯誤，直到從中獲取焦點。如果有錯誤，它會顯示。下一次，在更改程序中，如果遇到錯誤，則顯示相同的時間。
我實作了上述命令的第一部分，如何在同一個檔案中實作第二部分？用'useEffect'？如何？感謝您的幫助。
輸入.js
import {useState} from "react";
import {validate} from './validators';
const INPUT_STATES = { /*this is not used!*/
UNTOUCHED: 'UNTOUCHED',
VALID: 'VALID',
INVALID: 'INVALID'
};
const myValidate= validate; /*validate is the my validation function*/
const Input = props => {
const [value,setValue] = useState('');
const [validate,setValidate] = useState(true);
const handleChange = (e) => {
setValue(e.target.value);
}
const handleValidate = () => {
const Validate = myValidate(value,props.validators);
setValidate(Validate);
}
return (
<div className={`form-input ${validate ? '' : 'form-input--invalid'}`} data-testid="form-input">
<label htmlFor={props.id}>{props.label}</label>
<input value={value} type={props.type} id={props.id} onChange={handleChange} onBlur={handleValidate} />
<p>{validate ? '' : props.errorText}</p>
</div>
)
};
export default Input;
uj5u.com熱心網友回復：
我通過在handleChange和handleValidate 中添加兩個 If解決了上述問題。另外，我定義了另一個useState。
另外，我改變了第一個引數從myValidate，從價值到e.target.value。
輸入.js：
import React from "react";
import {useState} from "react";
import {validate} from './validators';/*This file is cantains validation rulles.*/
const myValidate = validate; /*validate is the my validation function*/
const Input = props => {
const [value,setValue] = useState('');
const [validate,setValidate] = useState(true);
const [valid,setValid] = useState('VALID');
const handleChange = (e) => {
setValue(e.target.value);
if(valid === 'INVALID'){
handleValidate(e);
}
}
const handleValidate = (e) => {
const Validate = myValidate(e.target.value,props.validators);
setValidate(Validate);
if(!Validate){
setValid('INVALID');
}
}
return (
<div className={`form-input ${validate ? '' : 'form-input--invalid'}`} data-testid="form-input">
<label htmlFor={props.id}>{props.label}</label>
<input value={value} type={props.type} id={props.id} onChange={handleChange} onBlur={handleValidate} />
<p>{validate ? '' : props.errorText}</p>
</div>
)
};
export default Input;
現在：
在第一次關注輸入期間不會顯示錯誤，直到從中獲取焦點。如果有錯誤，它會顯示。下一次，在更改程序中，如果遇到錯誤，則顯示相同的時間。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/397658.html
標籤：javascript 反应 验证 反应钩子