Suppress onChange and only use onBlur to a React input component - reactjs

Question

I have a component called Test that receives 2 props: CurrentPage and OnPageRequest: (currentPage: number) => void
When the parent component uses Test, it sets the Current page number in its state. As you update, the input field below, that value gets fed back up to the parent component via the OnPageRequest as:
OnPageRequest(e.target.value);
wherein return, the parent component updates its current page number in the state.
Test component:
const handlePageNumberBlur = (e) => {
OnPageRequest(e.target.value);
}
render() {
return (
<input
title="Current Page"
onBlur={handlePageNumberBlur}
aria-label="Current Page"
min="1"
max={TotalPages}
placeholder="1"
type="number"
value={this.props.CurrentPage} />
)
}
I'm trying to write Test in such a way so that it only fires back the newly inputted value only when the onBlur event is triggered. But I've learned that with the above code, it never updates the value. It only does it if I have an onChange event where I do: OnPageRequest(e.target.value);
How can I get it to change only when onBlur fires?
SAMPLE: https://codesandbox.io/s/kumuc

Answer 1

Try using defaultValue instead of value. The defaultValue prop only sets the value to the input on initial render and you won´t need to keep it updated if the value of the prop changes.
<input
{ ... }
defaultValue={this.prop.CurrentPage}
/>
But this can also be an issue if you set CurrentPage after the input has rendered, which depends on where you get your initial value for the prop.
If you need to keep the input updated after the first render, you can update its value using Refs and the componentDidUpdate lifecycle method.
class TestComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
componentDidUpdate(prevProps) {
if (this.inputRef.current.value != this.props.CurrentPage) {
this.inputRef.current.value = this.props.CurrentPage;
}
}
/* ... */
render() {
return <input
{ ... }
defaultValue={this.props.CurrentPage}
ref={this.inputRef}
/>
}
}