[解決済み] React - 制御不能な入力を変更する

質問

シンプルなリアクトコンポーネントで、制御された入力が1つあると思われるフォームを持っています。

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 は、コントロールされていない text 型の入力を、コントロールされるように変更しています。 制御されます。入力要素を非制御型から制御型に切り替えてはいけません。 制御される（またはその逆）。制御型と制御型のどちらを使用するかを決定する コンポーネントの寿命が尽きるまで、非制御の入力要素を使用します。

私の入力は値を持っているので、制御されていると思います。 何が間違っているのでしょうか？

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

解決方法は？

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

入力が制御されるためには、その値が状態変数の値に対応していなければならない。

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

を初期化することで this.state.name をコンストラクタで指定します。

例

this.state = { name: '' };

にすると、入力が最初から制御されるようになり、問題が解決します。参照 Reactの制御されたコンポーネント をご覧ください。

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