[解決済み] Reactの制御型コンポーネントと非制御型コンポーネントとは？

質問

ReactJSの制御型コンポーネントと非制御型コンポーネントとは何ですか？それぞれどのように違うのですか？

どのように解決するのですか？

これはステートフルなDOMコンポーネント（フォーム要素）に関するもので、Reactのドキュメントにその違いが説明されています。

• A 制御されたコンポーネント によって現在の値を取得するものです。 props のようなコールバックで変更を通知します。 onChange . 親コンポーネントは、コールバックを処理し、自身の状態を管理し、新しい値をプロップとして被コントロールコンポーネントに渡すことによって、それを "controls" します。これをquot;dumb component"と呼ぶこともできます。
• A 制御不能なコンポーネント は、内部的に自身の状態を保存しているもので、DOM への問い合わせは ref を使用して、必要なときに現在の値を見つけることができます。これは従来のHTMLに少し似ています。

ほとんどのネイティブReactフォームコンポーネントは、制御された使用法と制御されていない使用法の両方をサポートしています。

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

ほとんどの場合（あるいはすべての場合）において を使用すると、制御されたコンポーネントを使用する必要があります。 .