Javascript 在提交时清除输入字段

事情很简单也很清楚，我想在提交输入字段时清除输入字段

状态：

const [formData, setFormData] = useState({
   linkName: "",
   link: ""
});

   Axios.post("/api/social", body, config)
      .then(
          setSocialList(prev => [
               ...prev,
               { _id: Math.random(), link, linkName }
          ])
      )
      .then(setFormData({ link: " ", linkName: " " }));
} catch (err) {
    console.error(err);
}

handleSubmit

函数：

const [formData, setFormData] = useState({
   linkName: "",
   link: ""
});

   Axios.post("/api/social", body, config)
      .then(
          setSocialList(prev => [
               ...prev,
               { _id: Math.random(), link, linkName }
          ])
      )
      .then(setFormData({ link: " ", linkName: " " }));
} catch (err) {
    console.error(err);
}

这样，我无法清除我的

formData

状态，因此在提交时输入字段不会清除

---

完整代码：

问题基本上是

setFormData

函数被立即调用，因此在

Axios

post完成后，您没有将回调传递给

然后
您想要调用的

基于此，您需要：

.then(() => setFormData({ link: " ", linkName: " " }))

而不是：

.then(setFormData({ link: " ", linkName: " " }))

我希望这有帮助
 问题基本上是
setFormData
函数被立即调用，因此在
Axios
post完成后，您没有将回调传递给
然后
您想要调用的

基于此，您需要：

.then(() => setFormData({ link: " ", linkName: " " }))

而不是：

.then(setFormData({ link: " ", linkName: " " }))

我希望这有帮助
 这里需要双向绑定。将
linkName
作为值传递给您的
输入

<Input
    type="text"
    name="linkName"
    placeholder="Ex. Facebook"
    onChange={e => onChange(e)}
    value={linkName}
/>

注意：我已从上述重新分配中删除了单字符空格

在您的另一个
输入中也使用相同的方法进行操作。
此处需要双向绑定。将
linkName
作为值传递给您的
输入

<Input
    type="text"
    name="linkName"
    placeholder="Ex. Facebook"
    onChange={e => onChange(e)}
    value={linkName}
/>

注意：我已从上述重新分配中删除了单字符空格

在您的另一个
输入中也要以同样的方式进行操作。
您需要将link和linkName的值与输入字段绑定，否则该值将在状态中更新，但输入仍将具有输入的值，并且不会反映任何编程更新的值

import React, { Fragment, useState, useContext } from "react";
import { Button, Form, FormGroup, Label, Input, Row, Col } from "reactstrap";
import Axios from "axios";
import { SocialContext } from "./SocialContext";

const SocialForm = () => {
    const [formData, setFormData] = useState({
        linkName: "",
        link: ""
    });
    const [socialList, setSocialList] = useContext(SocialContext);
    const { linkName, link } = formData;
    const onChange = e =>
        setFormData({ ...formData, [e.target.name]: e.target.value });
    const token = localStorage.getItem("token");
    const handleSubmit = e => {
        e.preventDefault();
        const socialList = {
            linkName,
            link
        };
        try {
            const config = {
                headers: {
                    "Content-Type": "application/json",
                    "x-auth-token": `${token}`
                }
            };
            const body = JSON.stringify(socialList);
            Axios.post("/api/social", body, config)
                .then(
                    setSocialList(prev => [
                        ...prev,
                        { _id: Math.random(), link, linkName }
                    ])
                )
                .then(setFormData({ link: " ", linkName: " " }));
        } catch (err) {
            console.error(err);
        }
    };
    return (
        <Fragment>
            <br />
            <Form onSubmit={e => handleSubmit(e)} className="socialForm">
                <Row form>
                    <Col md={5}>
                        <FormGroup>
                            <Label for="LinkName">LinkName</Label>
                            <Input
                                type="text"
                                name="linkName"
                                value={linkName}
                                placeholder="Ex. Facebook"
                                onChange={e => onChange(e)}
                            />
                        </FormGroup>
                    </Col>
                    <Col md={5}>
                        <FormGroup>
                            <Label for="Link">Link</Label>
                            <Input
                                type="text"
                                name="link"
                                value={link}
                                placeholder="Ex. https://www.facebook.com/"
                                onChange={e => onChange(e)}
                            />
                        </FormGroup>
                    </Col>
                </Row>
                <Button>Add</Button>
            </Form>
        </Fragment>
    );
};

export default SocialForm;

import React，{Fragment，useState，useContext}来自“React”；
从“reactstrap”导入{按钮、表单、表单组、标签、输入、行、列}；
从“Axios”导入Axios；
从“/SocialContext”导入{SocialContext}；
const SocialForm=（）=>{
常量[formData，setFormData]=useState({
链接名称：“”，
链接：“
});
const[socialist，setsocialist]=useContext（SocialContext）；
const{linkName，link}=formData；
const onChange=e=>
setFormData（{…formData，[e.target.name]：e.target.value}）；
const token=localStorage.getItem（“token”）；
常量handleSubmit=e=>{
e、 预防默认值（）；
康斯特社会学家={
链接名，
链接
};
试一试{
常量配置={
标题：{
“内容类型”：“应用程序/json”，
“x-auth-token”：“${token}`
}
};
const body=JSON.stringify（socialList）；
post（“/api/social”，body，config）
.那么(
setSocialList（上一个=>[
…上一页，
{u id:Math.random（），link，linkName}
])
)
.then（setFormData（{link:，linkName:}））；
}捕捉（错误）{
控制台错误（err）；
}
};
返回(


handleSubmit（e）}className=“socialForm”>
链接名
onChange（e）}
/>
链接
onChange（e）}
/>
添加
);
};
出口违约社会形态；
您需要将link和linkName的值与输入字段绑定，否则该值将在状态中更新，但输入仍将具有输入的值，并且不会反映任何编程更新的值

import React, { Fragment, useState, useContext } from "react";
import { Button, Form, FormGroup, Label, Input, Row, Col } from "reactstrap";
import Axios from "axios";
import { SocialContext } from "./SocialContext";

const SocialForm = () => {
    const [formData, setFormData] = useState({
        linkName: "",
        link: ""
    });
    const [socialList, setSocialList] = useContext(SocialContext);
    const { linkName, link } = formData;
    const onChange = e =>
        setFormData({ ...formData, [e.target.name]: e.target.value });
    const token = localStorage.getItem("token");
    const handleSubmit = e => {
        e.preventDefault();
        const socialList = {
            linkName,
            link
        };
        try {
            const config = {
                headers: {
                    "Content-Type": "application/json",
                    "x-auth-token": `${token}`
                }
            };
            const body = JSON.stringify(socialList);
            Axios.post("/api/social", body, config)
                .then(
                    setSocialList(prev => [
                        ...prev,
                        { _id: Math.random(), link, linkName }
                    ])
                )
                .then(setFormData({ link: " ", linkName: " " }));
        } catch (err) {
            console.error(err);
        }
    };
    return (
        <Fragment>
            <br />
            <Form onSubmit={e => handleSubmit(e)} className="socialForm">
                <Row form>
                    <Col md={5}>
                        <FormGroup>
                            <Label for="LinkName">LinkName</Label>
                            <Input
                                type="text"
                                name="linkName"
                                value={linkName}
                                placeholder="Ex. Facebook"
                                onChange={e => onChange(e)}
                            />
                        </FormGroup>
                    </Col>
                    <Col md={5}>
                        <FormGroup>
                            <Label for="Link">Link</Label>
                            <Input
                                type="text"
                                name="link"
                                value={link}
                                placeholder="Ex. https://www.facebook.com/"
                                onChange={e => onChange(e)}
                            />
                        </FormGroup>
                    </Col>
                </Row>
                <Button>Add</Button>
            </Form>
        </Fragment>
    );
};

export default SocialForm;

import React，{Fragment，useState，useContext}来自“React”；
从“reactstrap”导入{按钮、表单、表单组、标签、输入、行、列}；
从“Axios”导入Axios；
从“/SocialContext”导入{SocialContext}；
const SocialForm=（）=>{
常量[formData，setFormData]=useState({
链接名称：“”，
链接：“
});
const[socialist，setsocialist]=useContext（SocialContext）；
const{linkName，link}=formData；
const onChange=e=>
setFormData（{…formData，[e.target.name]：e.target.value}）；
const token=localStorage.getItem（“token”）；
常量handleSubmit=e=>{
e、 预防默认值（）；
康斯特社会学家={
链接名，
链接
};
试一试{
常量配置={
标题：{
“内容类型”：“应用程序/json”，
“x-auth-token”：“${token}`
}
};
const body=JSON.stringify（socialList）；
post（“/api/social”，body，config）
.那么(
setSocialList（上一个=>[
…上一页，
{u id:Math.random（），link，linkName}
])
)
.then（setFormData（{link:，linkName:}））；
}捕捉（错误）{
控制台错误（err）；
}
};
返回(


handleSubmit（e）}className=“socialForm”>
链接名
onChange（e）}
/>
链接
onChange（e）}
/>
添加
);
};
出口违约社会形态；
Unfor