我想在reactjs中單擊提交后重置我的表單。我試過另一種方法。但它不起作用

import React,{ useState} from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react';
import axios from 'axios';
 
const Create = () => {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckBox] = useState(false);

在這里，我將資料發送到我創建的模擬 api

const postData = () =>{
        axios.post(`https://61cb2af8194ffe0017788c01.mockapi.io/fakeData`,{
            firstName,
            lastName,
            checkbox
        })     
    }

這是我創建的重置表單的方法，但它不起作用。

const resetForm = () => {
        postData();
        setFirstName(" ");
        setLastName(" ");
        setCheckBox(false);
    }

這是我的表單，單擊時我正在呼叫 resetForm 函式，但它不是重置它是發送資料但不是重置表單。

return(
    <div> 
         <Form> 
            <Form.Field>
                <label>First Name</label>
                <input  id="f1" placeholder='First Name' onChange={(e)=>setFirstName(e.target.value) } />
                
            </Form.Field>
            <Form.Field>
                <label>Last Name</label>
                <input id="last1" placeholder='Last Name'  onChange={(e)=>setLastName(e.target.value)}/>
            </Form.Field>
            <Form.Field>
                <Checkbox id="c1" label='I agree to the Terms and Conditions' onChange={(e)=>setCheckBox(!checkbox)}/>
            </Form.Field>
                <Button type='submit' onClick={resetForm}>Submit</Button>
        </Form>
        <br></br>
        <Button onClick={()=>navigate(-1)}>Go Back</Button>
    </div>
    
  )

}

export default Create;

uj5u.com熱心網友回復：

實際上它會重置表單，問題是你沒有使用受控組件在 UI 中顯示最新的更新值

你應該像這樣系結值：

<input type="text" value={this.state.value} onChange={this.handleChange} />

您可以在此處參考檔案：https : //reactjs.org/docs/forms.html

uj5u.com熱心網友回復：

您可以使用本機form.reset()方法重置表單。

const Create = () => {
  const ref = React.useRef(null);
  const resetForm = () => ref.current.reset();

  return (
    <div>
      <Form ref={ref}>
        <Form.Field>
          <label>First Name</label>
          <input id="f1" placeholder="First Name" onChange={(e) => setFirstName(e.target.value)} />
        </Form.Field>
        <Form.Field>
          <label>Last Name</label>
          <input id="last1" placeholder="Last Name" onChange={(e) => setLastName(e.target.value)} />
        </Form.Field>
        <Form.Field>
          <Checkbox
            id="c1"
            label="I agree to the Terms and Conditions"
            onChange={(e) => setCheckBox(!checkbox)}
          />
        </Form.Field>
        <Button type="submit" onClick={resetForm}>
          Submit
        </Button>
      </Form>
      <br></br>
      <Button onClick={() => navigate(-1)}>Go Back</Button>
    </div>
  );
};

export default Create;

uj5u.com熱心網友回復：

為此，您必須value在input. 試試這個

const Create = () => {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [checkbox, setCheckBox] = useState(false);

  const postData = () => {
    console.log(firstName, lastName, checkbox);
  };

  const resetForm = () => {
    postData();
    setFirstName(" ");
    setLastName(" ");
    setCheckBox(false);
  };

  return (
    <div>
      <Form>
        <Form.Field>
          <label>First Name</label>
          <input
            id="f1"
            placeholder="First Name"
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
          />
        </Form.Field>
        <Form.Field>
          <label>Last Name</label>
          <input
            id="last1"
            placeholder="Last Name"
            value={lastName}
            onChange={(e) => setLastName(e.target.value)}
          />
        </Form.Field>
        <Form.Field>
          <Checkbox
            id="c1"
            label="I agree to the Terms and Conditions"
            checked={checkbox}
            onChange={(e) => setCheckBox(!checkbox)}
          />
        </Form.Field>
        <Button type="submit" onClick={resetForm}>
          Submit
        </Button>
      </Form>
    </div>
  );
};

標籤：javascript html 反应 提交 重启

上一篇：從客戶端訪問環境變數

下一篇：var回傳NaN而不是數字