Clear input field using React hooks
You're using an uncontrolled input. Try setting value={message}
on the input.
How to clear input field after clicking submit in react js redux
Try this way:
clearInput = () => {
const reminder = { ...this.state.reminder, title: '' };
this.setState({ reminder });
};
handleSubmit = (e) => {
e.preventDefault();
this.props.dispatch(addRemainder(this.state.reminder));
this.clearInput();
};
Clear input field reset back to defaultValue (0)
I am assuming you are using Material UI's TextField component. As stated in the documentation, default value is only displayed when your component is uncontrolled. Here you have a controlled component.
https://mui.com/material-ui/api/text-field/
What you can do is providing onChange a function check whether e.target.value
is empty ("") or not, so you can set your variable to 0 or e.target.value
.
handleChange = (e) => {
if (e.target.value === "" && mynumber !== 0) {
setMyNumber(0)
} else {
setMyNumber(e.target.value)
}
}
<TextField
onChange={handleChange}
/>
clear text-field after submit in react
x clear icon appears only when the input has value - react
You can conditional render the icon based on the value of the input field. Maintain a state for the value using the useState hook. onChange will trigger everytime you enter a value into the input field and set the state.
export default function Search() {
const inputElt = useRef(null);
const [value,setValue] = useState('')
return (
<form className='flex'>
<input
ref={inputElt}
className='flex-grow focus:outline-none cursor-pointer'
type='search'
value={value}
onChange={(e) =>setValue(e.target.value)}
/>
{value && <XIcon className='h-5' />}
)
}
Related Topics
How to Use Js to Open an HTML Select to Show Its Option List
Retrieving Keys from Json Array Key-Value Pair Dynamically - JavaScript
How to Save .Xlsx Data to File as a Blob
Check If Image Exists on Server Using JavaScript
How to Replace Double/Multiple Slash to Single in Url
How to Find Previous or Next Element from Array in JavaScript
How to Redirect Drop Down Menu When Option Is Selected
Convert 12-Hour Hh:Mm Am/Pm to 24-Hour Hh:Mm
Delete Row on Remove Click React
How to Format Base64 Encoded String While Sending in Json
Moment Js Get First and Last Day of Current Month
How to Add Node Module to Angular Project If Is Not Schematics Enabled
Restrict to 2 Decimal Places in Keypress of a Text Box
How to Clear Input After Onclick With Reactjs
How to Pass the Checked and Unchecked Value of Checkboxes in Component.Ts File in Angular