1. ホーム
  2. ジャバスクリプト

[解決済み】ReactJSを使用して入力フィールドの値を取得する方法は?

2022-04-05 07:54:10

質問

以下のようなReactコンポーネントがあります。

export default class MyComponent extends React.Component {

    onSubmit(e) {
        e.preventDefault();
        var title = this.title;
        console.log(title);
    }

    render(){
        return (
            ...
            <form className="form-horizontal">
                ...
                <input type="text" className="form-control" ref={(c) => this.title = c} name="title" />
                ...
            </form>
            ...
            <button type="button" onClick={this.onSubmit} className="btn">Save</button>
            ...
        );
    }

};

コンソールでは undefined - このコードに何か問題があるのでしょうか?

解決方法は?

MyComponent extends React.Component クラスのコンストラクタを使用する必要があります。

constructor(props){
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

そして、タイトルの結果が表示されます。