web-dev-qa-db-ja.com

Reactの入力フィールドからフォームデータを取得する方法

コンストラクタと関数：

constructor(props) {
    super(props);

    this.state = {
        tagline: 'We rank what people are talking about.',
        year: new Date().getFullYear()
    };

    this.onFormSubmit = this.onFormSubmit.bind(this);
}

onFormSubmit(e) {
    console.log('onFormSubmit', e)
    console.log('this.state', this.state);
};

フォーム（明確にするためにclassNamesを削除）：

<form onSubmit={ this.onFormSubmit }>
    <div className="fl w100">
        <div>
            <input type="text" id="email" value={ this.state.email }/>
            <label htmlFor="email">Email</label>
        </div>
    </div>

    <div className="fl w100">
        <div>
            <input type="password" id="password" value={ this.state.password }/>
            <label htmlFor="password">Password</label>
        </div>
    </div>

    <button type="submit">
        Login
    </button>
</form>

これはログアウトするものです。電子メールやパスワードの情報はありません。 enter image description here

完全ログインコンポーネントコード

import React from 'react';

class Login extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            tagline: 'We rank what people are talking about.',
            year: new Date().getFullYear()
        };

        this.onFormSubmit = this.onFormSubmit.bind(this);
    }

    onFormSubmit(e) {
        console.log('onFormSubmit', e)
        console.log('this.state', this.state);
    };

    render() {
        return (<div className="app">
            <div className="welcome">
                <header>
                    <div className="wikitags-logo">
                        <img src="imgs/wikitags-logo.png"/>
                    </div>
                    <h2>Admin Portal</h2>
                    <p>{ this.state.tagline }</p>
                </header>

                <section className="login-form">
                    <form onSubmit={ this.onFormSubmit }>
                        <div className="fl w100">
                            <div className="mdl-textfield mdl-js-textfield">
                                <input className="mdl-textfield__input" type="text" id="email" value={ this.state.email }/>
                                <label className="mdl-textfield__label" htmlFor="email">Email</label>
                            </div>
                        </div>

                        <div className="fl w100">
                            <div className="mdl-textfield mdl-js-textfield">
                                <input className="mdl-textfield__input" type="password" id="password" value={ this.state.password }/>
                                <label className="mdl-textfield__label" htmlFor="password">Password</label>
                            </div>
                        </div>

                        <button type="submit" className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                            Login
                        </button>
                    </form>
                </section>

                <footer>
                    &copy; { this.state.year } WikiTags
                </footer>
            </div>
        </div>);
    }
}

export default Login;
javascriptreactjsinput
8
Leon Gaban

提案：

1。入力フィールドで値プロパティを使用していますが、onChangeメソッドを定義していないため、入力フィールドは読み取り専用状態値が更新されないため。

2。onChangeイベントを定義してすべての入力フィールドを定義するか、valueプロパティを削除してそれらを非制御要素にする必要があります。

3。制御されていない要素の場合、各フィールドへの参照を定義し、値にアクセスするにはthis.ref_name.valueを使用します。

onChangeイベントを定義することにより：

次のように、各入力要素にnameプロパティを定義します（名前は状態変数名と同じにする必要があります。これは状態の更新に役立ち、すべての変更を単一のonChange関数で処理できます）。

<input type="text" name='value' value={this.state.value} onChange={(e) => this.handleChange(e)} />

handleChange(e){
   this.setState({[e.target.name]: e.target.value})
}

Uncotrolled要素：

<input type="text" ref={el => this.el = el} />

次に、onSubmit関数内でthis.el.valueを使用して、この入力フィールドの値にアクセスします。

この回答を参照してください： https://stackoverflow.com/a/43695213/5185595

7
Mayank Shukla

console.log('this.state', this.state);の状態を渡していて、電子メールとパスワードの状態を設定していないため、電子メールまたはパスワード情報を取得していません。

今、あなたは2つの選択肢を得ました：

  1. 状態を設定し、そこからフォーム情報を取得します
  2. 情報を処理する関数に入力値を渡します

オプション1の場合は、メールとパスワードの状態を設定する必要があります（ただし、パスワードの状態を設定することはお勧めしません）。入力にonChangeイベントハンドラーを設定する必要があります。

onChangeイベントハンドラーを設定します。

<form onSubmit={ this.onFormSubmit }>
  <input type="text" id="email" onChange={this.handleEmailChange} value={ this.state.email } />

  <input type="password" id="password" onChange={this.handlePasswordChange} value={ this.state.password } />

  <button type="submit">
    Login
  </button>
</form>

そして、emailとpasswordの状態を設定する関数。

handleEmailChange(event) {
  this.setState({ email: event.target.value });
}

handlePasswordChange(event) {
  this.setState({ password: event.target.value });
}

そして、コンストラクタでemailとpasswordの状態を初期化し、関数をバインドすることを忘れないでください。

constructor(props) {
  super(props);

  this.state = {
    email: '',
    password: ''
  };

  this.handleEmailChange = this.handleEmailChange.bind(this);
  this.handlePasswordChange = this.handlePasswordChange.bind(this);
}

これで完了です。次に、onFormSubmit関数で、状態this.state.emailとthis.state.passwordのemailとpasswordの値にアクセスし、好きなことを行います。

オプション2の場合、入力のevent.target.valueを渡すだけです。これらはメールとパスワードの値であり、そこからフォームイベントハンドラonSubmit関数に渡します。あなたがやりたいことは何でもできます（状態を設定したり、電子メールとパスワードを更新したり、それらを変更したり、何でも）。

<form onSubmit={ this.onFormSubmit }>
  <input type="text" id="email" name="theEmail" />

  <input type="password" id="password" name="thePassword" />

  <button type="submit">
    Login
  </button>
</form>

そしてonFormSubmit関数。

onFormSubmit(event) {
  const email = event.target.theEmail.value;
  const password = event.target.thePassword.value;

  // do stuff
  console.log('Email:', email);
  console.log('Password:', password);
};

あなたがしようとしていることを達成するためのより簡単で推奨される方法は、オプション2です。

アプリが処理する状態が少ないほど、効果的です。

6
bntzio

だから私がこれに取り組む方法は、いわゆる制御されたコンポーネントを使ってあなたの状態に値を保存することです。制御されたコンポーネントの作成は非常に簡単です。これは基本的な実装です。

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('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ここで重要なのは、handleChange関数とonChange属性です。入力フィールドが変更されるたびに、handleChange関数が呼び出され、状態が更新されます。

ドキュメントの詳細情報はこちら https://facebook.github.io/react/docs/forms.html

1
Nitsew