☰

React - 制御されていない入力を変更する 質問する

tag-icon • tag-icon javascript node.js reactjs react-state
React - 制御されていない入力を変更する 質問する

制御された入力が 1 つあると思われるフォームを持つ単純な React コンポーネントがあります。

import React from 'react';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
            </form>
        )
    }

    onFieldChange(fieldName) {
        return function (event) {
            this.setState({[fieldName]: event.target.value});
        }
    }
}

export default MyForm;

アプリケーションを実行すると、次の警告が表示されます。

警告: MyForm は、テキスト タイプの非制御入力を制御入力に変更しています。入力要素は、非制御入力から制御入力に (またはその逆に) 切り替えるべきではありません。コンポーネントの有効期間中、制御入力要素と非制御入力要素のどちらを使用するかを決定します。

入力には値があるため、制御されていると思います。何が間違っているのでしょうか?

私はReact 15.1.0を使用しています

ベストアンサー1

入力には値があるため、制御されていると思います。

入力を制御するには、その値が状態変数の値と一致している必要があります。

this.state.nameこの条件は、最初は設定されていないため、例では最初は満たされません。したがって、入力は最初は制御されていません。onChangeハンドラーが初めてトリガーされると、this.state.nameが設定されます。その時点で、上記の条件が満たされ、入力は制御されていると見なされます。制御されていない状態から制御された状態へのこの遷移により、上記のエラーが発生します。

this.state.nameコンストラクターで初期化することにより:

例えば

this.state = { name: '' };

入力は最初から制御され、問題は解決されます。React 制御コンポーネントその他の例については、こちらをご覧ください。

このエラーとは関係ありませんが、デフォルトのエクスポートは 1 つだけである必要があります。上記のコードには 2 つあります。

おすすめ記事