代码之家 › 专栏 › 技术社区 › Shikhor Khan

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

reset form-submit forms reactjs javascript

Shikhor Khan · 技术社区 · 2 年前

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

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获取数据。我可以很容易地得到数据。但我想在提交后用“提交”按钮重置值。

3 回复 | 直到 2 年前

callmeizaz 2 年前

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

所以,如果你必须重新编写代码,它会是这样的。

    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;

kazi naeem rayhan 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
}

Roshan Shrestha 2 年前

简单的解决方法是像这样重置表单。

  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();
  };

别忘了给你的表格提供身份证

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

然而,我强烈建议你研究一下上面关于useState的callmeizaz答案。这是处理形式的正确方法