如何从下面的代码中删除React提交后的表单值？

Question

提交表单后如何删除输入数据？

import React from 'react';
import { Form } from 'react-bootstrap';

const AddItem = () => {


    const handleItemSubmit = (event) => {
        event.preventDefault();
        const carName = event.target.carName.value;
        const companyName = event.target.companyName.value;
        console.log(carName, companyName);

    }
    return (
        <div className='w-50 mx-auto mt-5 py-5 d-block'>
            <Form onSubmit={handleItemSubmit}>
                <Form.Group className="mb-3" controlId="formBasicCarName">
                    <Form.Control name="carName" type="text" placeholder="Enter Car Model Name" />
                </Form.Group>

                <Form.Group className="mb-3" controlId="formBasicCompany">
                    <Form.Control name="companyName" type="text" placeholder="Enter Company Name" />
                </Form.Group>
                <button className='btn btn-primary' variant="primary" type="submit">
                    Submit
                </button>
            </Form>
        </div>
    );
};

export default AddItem;

这里我接受了两个输入并使用OnSubmit获取数据。 Ant我可以轻松获取数据。但我想在提交后使用名为“提交”的相同按钮重置值。

Answer 1

因此，为了删除重置表单，您应该使用受控表单。 我所说的受控表单是指使用状态来更改表单输入。这就是推荐的方法和最佳实践。

因此，如果您必须重新编写代码，它将看起来像这样。

    import React ,{useState} from 'react';  // import useState hook
    import { Form } from 'react-bootstrap';
    
    const AddItem = () => {
    // Initialise  Values with empty string or null;
    const [inputeVal, setInputVal] = useState({
       carName:"",
       companyName:"",
    });
    
   const handleChange = (event)=>{
   const {name, value} = event.target;
   setInputVal({...inputVal, [name]:value}) // will set the values from input field to relevant state

   }
    
   const handleItemSubmit = () => {
      // your handle submit logic goes here 

     // after submit you can reset the form by resetting the states

     setInputVal({
        carName:"",
        companyName:"",
     })
    
        }
        return (
            <div className='w-50 mx-auto mt-5 py-5 d-block'>
                <Form onSubmit={handleItemSubmit}>
                    <Form.Group className="mb-3" controlId="formBasicCarName">
                        <Form.Control onChange={handleChange} value={inputVal?.carName} name="carName" type="text" placeholder="Enter Car Model Name" />
                    </Form.Group>
    
                    <Form.Group className="mb-3" controlId="formBasicCompany">
                        <Form.Control onChange={handleChange} value={inputVal?.companyName} name="companyName" type="text" placeholder="Enter Company Name" />
                    </Form.Group>
                    <button className='btn btn-primary' variant="primary" type="submit">
                        Submit
                    </button>
                </Form>
            </div>
        );
    };
    
    export default AddItem;

Answer 2

像这样重置表单：

const handleItemSubmit = (event) => {
     event.preventDefault();
     const carName = event.target.carName.value;
     const companyName = event.target.companyName.value;
     console.log(carName, companyName);
     event.target.reset(); //add this line
}

Answer 3

简单的修复方法就是像这样重置表单。

  const handleItemSubmit = (event) => {
    event.preventDefault();
    const carName = event.target.carName.value;
    const companyName = event.target.companyName.value;
    console.log(carName, companyName);
    event.target.carName = "";
    const inputField = document.getElementById("form");
    inputField.reset();
  };

不要忘记在您的表单中提供 id

<Form onSubmit={handleItemSubmit} id="form">

但是，我强烈建议您查看上面关于 useState 的 callmeizaz 答案。这就是处理表单的正确方法

Answer 4

只需在函数末尾添加即可

event.target.reset();