我有一個帶有答案串列的模式。我可以點擊一個答案來選擇它，然后點擊一個按鈕來確認我的選擇。或者我可以雙擊一個答案來選擇它并確認。
我無法正確處理雙擊案例。
使用 React 類組件，我會setState()像這樣使用 's 回呼：
setState({selectedAnswer: answer}, confirm)
但現在，我只知道以下幾點：
const MyModal = ({hide, setAnwser}) => {
const [selectedAnswer, setSelectedAnswer] = useState(null);
const [isSelectionDone, setIsSelectionDone] = useState(false);
const confirm = () => {
if (!selectedAnswer) {
return;
}
setAnwser(selectedAnswer);
hide();
};
const handleAnswerOnClick = (answer) => {
setSelectedAnswer(answer);
};
const handleAnswerOnDoubleClick = (answer) => {
setSelectedAnswer(answer);
setIsSelectionDone(true);
};
useEffect(confirm, [isSelectionDone]);
return (
<div>
<div>{answers.map((answer) => <MyAnswer
isSelected={answer.id === selectedAnswer?.id}
key={answer.id}
answer={answer}
onClick={handleAnswerOnClick}
onDoubleClick={handleAnswerOnDoubleClick}/>)}</div>
<button onClick={confirm}>Confirm</button>
</div>
);
}
我強烈懷疑有更好/更好的方法來做到這一點。
也許很簡單：
const MyModal = ({hide, setAnwser}) => {
const [selectedAnswer, setSelectedAnswer] = useState(null);
const confirm = () => {
if (!selectedAnswer) {
return;
}
setAnwser(selectedAnswer);
hide();
};
const handleAnswerOnClick = (answer) => {
setSelectedAnswer(answer);
};
const handleAnswerOnDoubleClick = (answer) => {
setAnwser(answer);
hide();
};
return (
<div>
<div>{answers.map((answer) => <MyAnswer
isSelected={answer.id === selectedAnswer?.id}
key={answer.id}
answer={answer}
onClick={handleAnswerOnClick}
onDoubleClick={handleAnswerOnDoubleClick}/>)}</div>
<button onClick={confirm}>Confirm</button>
</div>
);
}
哪種方式更好？
uj5u.com熱心網友回復：
鉤子中沒有類似的設定狀態（在設定狀態后觸發回呼）。但是，您可以應用以下重構：
const confirm = (sAnswer = selectedAnswer) => {
if (!sAnswer) {
return;
}
setAnwser(sAnswer);
hide();
};
接著
const handleAnswerOnDoubleClick = (answer) => {
setSelectedAnswer(answer);
confirm(answer);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/486619.html
標籤：javascript 反应 反应钩子
上一篇：D3Y軸間隔25個數字