oninput and onchange of DOM oninput when entering content, it is called continuously, and the value can be taken continuously through element.value . Losing focus and getting focus will not be called. onchange is not called during input, but only when the value when losing focus and losing focus is inconsistent with value when gaining focus (the input changes). if you need to detect whether the contents of one of the user's input boxes have changed, onchange can handle this situation very well. <body> <input type="text" id="myInput" oninput="myinput()" /> <input type="text" id="change" onchange="mychange()" /> </body> <script> function myinput() { var x = document.getElementById("myInput").value; console.info("input", x); } function mychange() { var x = document.getElementById("change").value; console.info("change", x); } </script> onInput and onChange in React There is not much difference between onInput of React and onChange . It is triggered when the user continues to type, not when the user loses access or focus. to get focus related events, you need to use onFocus and onBlur . If you need to check whether the content entered by the user has changed, you need to compare the values manually, which is not as convenient as the native onChange . export default function InputChange() { function input(e) { console.info("input", e.target.value); } function change(e) { console.info("change", e.target.value); } return ( <div style={{ display: "flex", flexDirection: "column" }}> <input onFocus onBlur onInput={input}></input> <input onChange={change}></input> </div> ); } check the TypeScript type of the corresponding parameter: <input onInput={(evt: React.FormEvent<HTMLInputElement>) => {}}></input> <input onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {}}></input> The argument to onInput is React.FormEvent , while onChange is React.ChangeEvent ,…
In many teams that fully use Hooks , the only scenario that uses ClassComponent is using ClassComponent to create ErrorBoundary . it can be said that if there are two lifecycle functions substitutes for Hooks , then ClassComponent can be completely discarded: getDerivedStateFromError componentDidCatch then why is there no Hook alignment yet? Today we talk about how these two lifecycle functions are implemented and the cost of porting them to Hook . ErrorBoundary implementation principle ErrorBoundary can catch errors in the React workflow in descendant components. React workflow refers to render phase, that is, component render , Diff algorithm occurs commit phase, that is, rendering DOM , componentDidMount/Update execution phase this is why errors that occur in event callbacks cannot be caught by ErrorBoundary -event callbacks are not part of the React workflow . how to catch errors The overall execution flow of render phase is as follows: do { try { // the specific execution process of render phase workLoop(); break; } catch (thrownValue) { handleError(root, thrownValue); } } while (true); you can find that if an error occurs in the render phase , the handleError method is captured and executed. similarly, the overall execution flow of commit phase is as follows: try { //... Specific implementation process } catch (error) { captureCommitPhaseError(current, nearestMountedAncestor, error); } if an error occurs in the commit phase , the captureCommitPhaseError method is captured and executed. getDerivedStateFromError principle how to deal with captured errors? We know that the first parameter of this.setState in ClassComponent can receive not only the new state , but…
React Optimizing Provider Context Usage in React Build Your Own ChatGPT Clone with React and the OpenAI API How to Build an Accordion Component with React.js v0: ‘An AI Tool by Vercel That’s Effectively Midjourney for React’ Bootstrap a React app with smol developer Understanding Props in React — A Comprehensive Guide
