如何在 React 函数中的另一个操作后清除输入字段？

Question

我有一个按钮和 2 个输入字段，我正在将这些输入字段值发送到后端。等做一些操作。在 addCustomer 函数中进行操作后，我想重置输入字段，但它不起作用。这是代码：

function TableFooterPanel(props) {

    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');

    const addNewCustomer = async (name, surname) => {
        await service.addCustomer(name, surname);
        props.funcParam();
        setFirstName('');
        setLastName('');
    }

    var isButtonDisabled = false;

    (firstName.length <= 3 || lastName.length <= 3) ? isButtonDisabled = true : isButtonDisabled = false;

    return (

        <>
            <Card className='buttonFooter'>
                <Form className='buttonFooter'>
                    <input type="text" placeholder="First Name" defaultValue={firstName} onChange={e => setFirstName(e.target.value)}></input>
                    <input type="text" placeholder="Last Name" defaultValue={lastName} onChange={e => setLastName(e.target.value)}></input>
                    <Button disabled={isButtonDisabled} onClick={() => addNewCustomer(firstName, lastName)} className='addButton'>Add</Button>
                    <label hidden={!isButtonDisabled} className='labelStyle'>Field lengths must be at least 4 character</label>
                </Form>
            </Card>

        </>

    );

}
export default TableFooterPanel;

除了

，一切正常

            setFirstName('');
            setLastName('');

他们没有重置或设置为另一个值。这是什么原因，我该如何实现？

Answer 1

也许您可以使用状态挂钩来跟踪服务器响应。

如果响应有效则发回 true 并触发重置 text-fields 函数

Answer 2

在没有看到您的服务代码的情况下，我不确定我能否 100% 保证此建议中的任何一个。但在我看来，您应该在 .then() 或 .finally()

中完成这项工作

例如：

  const addNewCustomer = async (name, surname) => {
    await service.addCustomer(name, surname)
      .then(() => {
        props.funcParam();
        setFirstName('');
        setLastName('');
    })
  };

如果你想执行而不考虑服务器的结果，你也可以在 .finally 中执行此操作。

Answer 3

问题是您设置的是 defaultValue 属性而不是 value 属性。

<input type="text" placeholder="First Name" value={firstName} onChange={e => setFirstName(e.target.value)} />
<input type="text" placeholder="Last Name" value={lastName} onChange={e => setLastName(e.target.value)} />

来自文档： https://reactjs.org/docs/forms.html#controlled-components

如何在 React 函数中的另一个操作后清除输入字段？

How to clean input fields after another operations in a function in React?

javascript

typescript

reactjs

react-hooks

use-state