나는 이것을 백만 번 해왔고이 문제가 없었으며 내가 뭘 잘못하고 있는지 모르겠습니다. 간단한 입력 필드가 있고 후크 useState가 amount있고 함수를 setAmount사용하여 handleChange이것을 업데이트하지만 handleChange함수가 트리거되지 않습니다.
const CustomAmount = () => {
const [amount, setAmount] = useState(1);
const handleChange = (e) => {
console.log(e); // This is not working either
setAmount(e.target.value);
};
return (
<div className="custom-amount-container">
<h4>Enter your desired amount</h4>
<input
type="number"
name="custom-amount"
data-test="custom-amount-input"
value={amount}
onChange={handleChange}
/>
</div>
);
};
나는 그것을 onChange소품 안에 직접 넣어 보았지만 여전히 운 onChange이 없으며 일반적으로 기능이 작동하지 않으면 값이 변경되지 않지만이 경우 값이 입력 필드 내부에서 변경됩니다.
또한 sweetalert모달 내부 에서이 구성 요소를 사용하고 있습니다.
const customAmountModal = () => {
return swal(<CustomAmount />);
};
내부에 래핑되어 swal있지만 할 수없는 구성 요소에 대해 호출되지 않는 이벤트 처리기의 원인을 디버깅하려고했습니다 . 따라서 제한된 이해에 따라 React Synthetic Events 는 이러한 구성 요소에 대해 트리거되지 않지만 Native DOM Events 를 사용하면 다음과 같은 동일한 기능을 얻을 수 있습니다.
import { useEffect, useRef, useState } from "react";
import swal from "@sweetalert/with-react";
import "./styles.css";
const CustomAmount = () => {
const [amount, setAmount] = useState(1);
const inputRef = useRef(null);
const handleChange = (e) => {
console.log(e.target.value);
setAmount(e.target.value);
};
console.log("render", amount);
useEffect(() => {
inputRef.current.addEventListener("input", handleChange);
}, []);
return (
<div className="custom-amount-container">
<h4>Enter your desired amount</h4>
<input
type="number"
name="custom-amount"
data-test="custom-amount-input"
value={amount}
ref={inputRef}
/>
</div>
);
};
export default function App() {
const customAmountModal = () => {
return swal(<CustomAmount />);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<button onClick={customAmountModal}>Click me</button>
</div>
);
}
여기 codesandbox 링크입니다 - https://codesandbox.io/s/mystifying-jang-jrgex?file=/src/App.js
여전히 React 방식이 작동하지 않는 이유를 알고 싶습니다 . 실제로 swal사용 사례를 모르고 작업하지 않았습니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다