基本上，在將影像上傳到 firebase 之前，我試圖將輸入控制為：
export const controlThumbnail = (selectedThumbnail, setThumbnailError) => {
if (!selectedThumbnail) {
setThumbnailError('Please select a thumbnail!');
return;
}
if (!selectedThumbnail.type.includes('image')) {
setThumbnailError('Please select an image!');
return;
}
if (selectedThumbnail.size > 1000000) {
setThumbnailError('Image size must be less than 1MB!');
return;
}
setThumbnailError(null);
};
我從 /lib/controlThumbnail.js 呼叫上述方法到：
import { controlThumbnail } from '../../lib/controlThumbnail';
const Signup = () => {
const [userInfo, setUserInfo] = useState({
name: '',
email: '',
password: '',
thumbnail: null
});
const [thumbnailError, setThumbnailError] = useState(null);
const userInputHandler = (e) => {
setUserInfo((prevUserInfo) => {
if (e.target.name === 'thumbnail') {
const thumbnail = e.target.files[0];
controlThumbnail(thumbnail, setThumbnailError);
return { ...prevUserInfo, thumbnail };
} else {
return { ...prevUserInfo, [e.target.name]: e.target.value };
}
});
};
...
所以，這現在作業正常，但我想知道這是否是這樣做的好方法？或者我應該將控制方法放在組件中并且永遠不要將 setState 作為引數？
uj5u.com熱心網友回復：
這是主觀的。就個人而言，我認為controlThumbnail函式不是進行這種抽象的正確位置。在這里，您實際上只是提供驗證。你不需要讓它負責驗證和設定一些狀態。
您可以創建一個純驗證函式，然后使用 this 的回傳值來更新Signup組件中的狀態：
const validateThumbnail = (thumbnail) => {
if (!thumbnail) {
return 'Please select a thumbnail!';
}
if (!thumbnail.type.includes('image')) {
return 'Please select an image!'
}
if (thumbnail.size > 1000000) {
return 'Image size must be less than 1MB!'
}
return null
}
const Signup = () => {
const [userInfo, setUserInfo] = useState({
name: '',
email: '',
password: '',
thumbnail: null
});
const [thumbnailError, setThumbnailError] = useState(null);
const userInputHandler = (e) => {
setUserInfo((prevUserInfo) => {
if (e.target.name === 'thumbnail') {
const thumbnail = e.target.files[0];
setThumbnailError(validateThumbnail(thumbnail));
return { ...prevUserInfo, thumbnail };
}
return { ...prevUserInfo, [e.target.name]: e.target.value };
});
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/392443.html
標籤：javascript 反应 前端