React で制御されるコンポーネントとは何ですか

React では、制御コンポーネントは、状態を使用して入力要素の値を取得および設定するコンポーネントです。また、フォームをレンダリングする React コンポーネントが、フォーム上で発生する操作も制御することも理解できます。このように値を制御するフォーム入力要素は、ユーザー入力プロセス中に React によって使用され、制御コンポーネントと呼ばれます。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react の制御コンポーネントとは

React の公式 Web サイトでは、制御コンポーネントについて次のように説明されています。 フォームをレンダリングする React コンポーネントは、ユーザー入力中にフォーム上で発生する操作も制御します。このようにReactによって値が制御されるフォーム入力要素を「制御コンポーネント」と呼びます。

状態を使用して入力要素の値を取得および設定するコンポーネントは、制御コンポーネントと呼ばれます。 、、<select> などのタグはすべて、value 属性を使用して制御されたコンポーネントを実装できます。 </select>

一部のネチズンは次のように説明しました: React では、フォームの状態が変化するたびに、それがコンポーネントの状態に書き込まれます。このタイプのコンポーネントは、React では制御コンポーネントと呼ばれます。

制御コンポーネントの更新プロセス:

1、初期状態のフォームのデフォルト値を設定できます

2、フォームの値が変更されるたびに、呼び出しますonChange イベント ハンドラー、

3、イベント ハンドラーはイベント オブジェクト e を通じて変更された状態を取得し、状態を変更します。

4、setState はビューの更新をトリガーしてフォームの更新を完了しますコンポーネント値

例: input

- フォーム送信の防止

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        this.setState({ value: event.target.value });
    }
    handleSubmit(event) {
        alert('提交的名字: ' + this.state.value);
        event.preventDefault();
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    名字:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="提交" />
            </form>
        );
    }
}

- ファイル タイプ input

// file类型的input，属性value是只读的，所以是非受控组件
<input type="file" />

推奨される学習: "react ビデオ チュートリアル >>

以上がReact で制御されるコンポーネントとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。