☰

Reactでフォームデータを取得する 質問する

tag-icon • tag-icon reactjs
Reactでフォームデータを取得する 質問する

私の関数には次のような単純なフォームがありますrender。

render : function() {
      return (
        <form>
          <input type="text" name="email" placeholder="Email" />
          <input type="password" name="password" placeholder="Password" />
          <button type="button" onClick={this.handleLogin}>Login</button>
        </form>
      );
    },
handleLogin: function() {
   // How can I access email and password here?
}

handleLogin: function() { ... }アクセスEmailとPasswordフィールドには何を記入すればよいですか?

ベストアンサー1

これを行うにはいくつかの方法があります:

1) フォーム要素の配列からインデックスで値を取得する

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target[0].value)
}

2) HTMLでname属性を使用する

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target.elements.username.value) // from elements property
  console.log(event.target.username.value)          // or directly
}

<input type="text" name="username"/>

3) refsの使用

handleSubmit = (event) => {
  console.log(this.inputNode.value)
}

<input type="text" name="username" ref={node => (this.inputNode = node)}/>

完全な例

class NameForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault()
    console.log(event.target[0].value)
    console.log(event.target.elements.username.value)
    console.log(event.target.username.value)
    console.log(this.inputNode.value)
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            name="username"
            ref={node => (this.inputNode = node)}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    )
  }
}

おすすめ記事