Home > Mobile >  React Native Handle Reset button in textinput
React Native Handle Reset button in textinput

Time:10-07

How can i reset or clear the TextField and Picker? please help thanks.

 const [selecteddocClassification, setSelecteddocClassification] = React.useState(0);

 const handleReset=()=>{
  ////here
 }
return(
    <Formik
       .....
  <TextField
       id="strdatefrom"
       label="Date from"
       name="strdatefrom"
       type="date"
       onChange={handleChange('strdatefrom')}
       value={strdatefrom}
       className={classes.textField}
       />
      <Picker 
          value={selecteddocClassification}    
          selectedValue={selecteddocClassification}
          onValueChange={(itemValue, itemIndex) =>{
          if (itemValue !== 0) {
             setSelecteddocClassification(itemValue)
             setFieldValue("documentClassificationId",itemValue)
          } 
          }}
          >
          <Picker.Item label='Please select an option...' value='0' />
              {classificationsPickerItems}
         </Picker>
 <Button variant="contained"
     onClick={handleReset}>
 Reset
 </Button>
)}
  ...

Please ignore this message, Please ignore this message, Please ignore this message, Please ignore this message, Please ignore this message, Please ignore this message, Please ignore this message, Please ignore this message, Please ignore this message, Please ignore this message,

CodePudding user response:

add this in formik

<Formik

>
{({ resetForm ....

 <Button variant="contained"
     onClick={resetForm}>
 Reset
 </Button>
...

this will reset or clear your form :)

  • Related