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

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获取数据。蚂蚁我可以轻松获取数据。但是，我想在以“提交”为“提交”的同一按钮提交后重置该值。

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

只需在功能末尾添加

event.target.reset();

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.reset(); //add this line
}

Answer 4

简单的修复是重置这样的表格。

  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答案。那是处理形式的正确方法