提交表单后如何清除 React Bootstrap textarea 表单控件？

Question

我有一个用 React Bootstrap 制作的表单，可以简单地提交一个将保存在数据库中的字符串。 它有效并保存了提交的消息，但我不知道如何在提交消息时清除文本区域。

如您所见，我尝试做的是使用 useState 挂钩设置一个空值，但在提交表单后，字符串在文本区域中仍然可见。 有什么办法吗？

const Form = (props) => {

    const [isLoading, setLoading] = useState(false);
    const [value, setValue] = useState(props.value);

    const handleSubmit = async event => {
        setLoading(true);
        event.preventDefault();

        const res = await fetch(
            // here I call the api
        )
        result = await res.json();
        setValue(null);
        setLoading(false);
    };


    return (
        <Form onSubmit={handleSubmit}>
            <Form.Group className="mb-3" controlId="text">
                <Form.Control as="textarea"
                              required
                              type="text"
                              placeholder=""
                              defaultValue={value}
                />
            </Form.Group>

            <Button
                variant="primary"
                type="submit"
                disabled={isLoading}
            >
                {isLoading ? 'Saving...' : 'Save'}
            </Button>
        </Form>
    )
}

export default Form;

Answer 1

从 props 中删除值 - 表单组件应包含此 state。然后，对于受控输入，您需要将 Form.Control 上的“defaultValue”更改为“value”。 同时添加 onChange 并设置值。 在表单提交上，您可以将值 state 设置为空字符串，而不是 null：

https://codesandbox.io/s/competent-carson-wupp3i

Answer 2

在我看来，您的 textarea 目前是uncontrolled ，因此对value所做的任何更改都不会在 Form.Control 组件中更新。

   <Form.Control 
      as="textarea" 
      rows={3}
      value={value}
      onChange={e => {
         setValue(e.target.value);
      }
   />

我可能不会使用defaultValue道具，而是使用setValue(props.value)来重置您的处理程序 function 中的value 。