React Bootstrap提供的是受控组件还是非受控组件？

2 年 ago
科, 雅
1 minute

首先

最近我在工作上开始使用React Hook Form和React Bootstrap进行编码。在其中，开发团队讨论了这个标题的内容，但在网上的调查中没有找到直接的答案。经过阅读文档和实践，我得出了自己的结论，因此打算把这些记录下来作为一篇文章。

受控组件是指制御组件。

称为通过React的state来管理输入表单值的组件。
控制是指React控制值。
参考：https://ja.legacy.reactjs.org/docs/forms.html#controlled-components (虽然是旧文档，但易于理解)

非受控组件（Uncontrolled component）是指

根据公式，这里指的是通过DOM来管理输入表单值的组件。
非受控 = 在React方面不控制值
我认为这是一种理解方式。
参考：https://ja.legacy.reactjs.org/docs/uncontrolled-components.html

React Bootstrap提供了哪些组件？

在React Bootstrap提供的组件中，可以根据使用方法成为受控组件或非受控组件，这是个正确的结论。我试着用React Bootstrap的Form.Control实现了一下。

控制元件的使用方式

阅读React Bootstrap文档的印象是，基本上React Bootstrap组件的使用是以控制为前提的。
在下面的示例中，我们使用state来管理值，并在onChange中进行值的更改。

import { Form } from 'react-bootstrap';
...

export const TestComponent = () => {
    const [testValue, setTestValue] = useState('');
 
    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        setTestValue(event.target.value);
    };
 
    const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        // stateで管理していた値を取得
        console.log("testValue", testValue);
    };
 
    return (
        <>
            <Form onSubmit={handleSubmit}>
                <Form.Control
                    type="text"
                    value={testValue}
                    onChange={handleChange}
                    placeholder="値を入力してください"
                />
                <button type="submit">送信</button>
            </Form>
        </>
    );
};

非受控组件的使用方法 kè de

React Bootstrap的组件似乎可以指定ref属性。
通过指定ref属性，可以引用DOM并获取其值。

import { Form } from 'react-bootstrap';
...

export const TestComponent = () => {
    const inputRef = useRef<HTMLInputElement | null>(null);
 
    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        // DOMから値を取得
        const testValue = inputRef.current?.value;
        console.log("testValue", testValue);
    };
 
    return (
        <>
            <Form onSubmit={handleSubmit}>
                <Form.Control
                    type="text"
                    ref={inputRef}
                    placeholder="値を入力してください"
                />
                <button type="submit">送信</button>
            </Form>
        </>
    );
};

最后

希望这篇简短的文章对大家有所帮助。在React Hook Form中，通过判断组件是受控组件还是非受控组件，实现验证的方法会有所不同，并且在某些情况下需要谨慎处理受控和非受控的情况。

以上

bannerAds