Reactjs 提交后清除表单字段

我在react中有一个表单，一旦表单成功提交，它应该清空输入字段。我真的很难做到这一点。当我调用

setInput（{}）

时，状态被清除，但输入保持填充状态

const [input, setInput] = useState({});
const [response, setResponse] = useState({});
const [errors, setErrors] = useState({});

const handleChange = (e) => setInput({
    ...input,
    [e.currentTarget.name]: e.currentTarget.value
});

const handleSubmit = (e) => {
    e.preventDefault();
    setErrors({});

    axios.post(target, input, headers)
        .then( response => {
            setResponse(response.data.success);
            setInput({});
        })
        .catch(error => {
            setErrors(error.response.data.errors);
        });
};

下面是一个

输入的示例

            <input 
                name="name" 
                type="text" 
                onChange={ handleChange }
            />

您的输入缺少一个
值
属性来控制其
值
。虽然您有一个状态，但您的输入是不受控制的：

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

并在提交表单时传递相同的init对象进行重置：

axios.post(target, input, headers)
    .then( response => {
        setResponse(response.data.success);
        setInput({name: '', email: ''});
    })
    .catch(error => {
        setErrors(error.response.data.errors);
    });

您没有对输入的
值
属性执行任何操作，所以难怪没有任何内容被清除。但是我建议用它。这是我的想法。创建对该输入字段的引用，以便可以随时随地对其进行操作。比如说：

...
const [errors, setErrors] = useState({});
const r = useRef(); // <- This is your ref
const handleChange = (e) => setInput({
    ...input,
    [e.currentTarget.name]: e.currentTarget.value
});
...

...
const [errors, setErrors] = useState({});
const r = useRef(); // <- This is your ref
const handleChange = (e) => setInput({
    ...input,
    [e.currentTarget.name]: e.currentTarget.value
});
...


           <input 
                name="name" 
                type="text" 
                ref={r}
                onChange={ handleChange }
            />

const handleSubmit = (e) => {
      r.current.value = '';
...
...