reactjs - 我想在单击重置按钮时清除输入字段中的所有信息和状态

Question

我想在单击重置按钮时清除输入字段和状态中的所有信息。我想要基于反应功能的组件中的工作代码。代码如下：

 import React, { useState } from 'react'
    import logo from './images/logo.png'
    import './MyVehicles.css'
    import { Link, useHistory } from "react-router-dom";
    import TextField from '@material-ui/core/TextField';
    
    
    function MyVehicles() {
        const history = useHistory()
        const [checked, setChecked] = useState("Male");
        const [reset, setReset] = useState("");
    
      const onValueChange = (event) => {
        setChecked(event.target.value);
      };
    
          const [data, setData] = useState({
           vehicletype: "",
           selectvehicle: "",
            registrationdate: "",
            ba: "",
            pa:"",
            alias:"",
            taxexpiredate:""
        });
        
        
        
        
        const InputEvent = (event) => {
            const { name, value } = event.target;
        
            setData((preVal) => {
                return {
                    ...preVal,
                    [name]: value,
                };
            });
        };
        
             const formSubmit = (e) => {
                 e.preventDefault();
                 console.log(checked);
                 console.log(data);
                
             };
        
        return (
            
    
            
    
        <h1 className="h__myVehicle">My Vehicles</h1> 
    
                <button className="add__vehicle">Add Vehicle</button>
    
                
                    
                <form className="form__vehicle" onSubmit={formSubmit}>
    
                    <div className="col-6 leftSide1__col">
    
                    <h1 className="h1__myVehicle">vehicle type</h1>
    
        <div className="radio">
            <label>
              <input
                type="radio"
                value="2 wheeler"
                checked={checked === "2 wheeler"}
                onChange={onValueChange}
              />
              2 wheeler
            </label>
          
          
            <label>
              <input
                type="radio"
                value="4 wheeler"
                checked={checked === "4 wheeler"}
                onChange={onValueChange}
              />
              4 wheeler
            </label>
          </div>
                    
                    <h1 className="h1__myVehicle">select vehicle</h1>
                    <input className="form__input" type="dropdown" placeholder="सवारी छान्नुहोस्" name="selectvehicle" value={data.selectvehicle} onChange={InputEvent} ></input>
    
                    <h1 className="h1__myVehicle"> registration date(BS): YYYY-MM-DD</h1>
                    <TextField
        id="date"
        type="date"
        name="registrationdate"
         value={data.registrationdate} 
         onChange={InputEvent}
        defaultValue="2017-05-24"
        InputLabelProps={{
          shrink: true,
        }}
      />
    
                    <div className="form__button">
                    <button className="reset__button" >reset</button>
                    <button className="save__button" >save</button>
                    </div>
                    
                    </div>
                    
                    
    
                <div className="col-6 rightSide1__col">
    
                <h1 className="h1__myVehicle">full vehicle no:</h1>
    
                    <div className="form1__info">
                    <h5 className="h5__myVehicle">BA</h5>
                    <input  className="form2__input1" type="text" placeholder="Lot" name="ba" value={data.ba} onChange={InputEvent}></input>
                    <h5 className="h5__myVehicle">PA</h5>
                    <input className="form2__input2" type="number" placeholder="Number" name="pa" value={data.pa} onChange={InputEvent}></input>
                    </div>
                    
                    <h1 className="h1__myVehicle">Alias:optional</h1>
                    <input className="form__input" type="text" placeholder="None" name="alias" value={data.alias} onChange={InputEvent}></input>
                    <h1 className="h1__myVehicle"> tax expire date(BS): YYYY-MM-DD</h1>
                    <TextField
        id="date"
        type="date" 
        name="taxexpiredate"
         value={data.taxexpiredate} 
         onChange={InputEvent}
        defaultValue="2017-05-24"
        InputLabelProps={{
          shrink: true,
        }}
      />
                   
    
                    <button className="next1__button" onClick={() => history.push('/myprofile')}>Next</button>
                       
                </div>
                    
                </form>
                    
                </div>
                    
    
                
    
    
    
                
           
        )
}

export default MyVehicles

我发现 stackoverflow 与其他基于类的组件但没有帮助我，因为我希望它在基于功能的组件中。我是新来的反应。请帮忙。

标签： reactjsreact-hooks

Answer 1

如果您不明白@kunquan 所说的内容，请遵循以下代码：

//your remaining part of the code (no change)
const resetForm=()=>{

 setData({
   vehicletype: "",
   selectvehicle: "",
   registrationdate: "",
   ba: "",
   pa:"",
   alias:"",
   taxexpiredate:""
 });

  //your remaining part of the code (no change)

}

 return( 
  //your remaining part of the code (no change)
   <button className="reset__button" onClick={resetForm} >reset</button>
  //your remaining part of the code (no change)
 )