これは入力状態値を取得するのに有効ですか？

Question

私はここで、これまでのところ、私は後だものを達成することができました再利用可能なフォームと入力部品とを構築しようとしているが、彼らは私が求めている質問があればある

import React from 'react' 
import classNames from 'classnames/bind' 
import styles from './style.scss' 
import Form from 'components/Form' 
import Input from 'components/Input' 

const cx = classNames.bind(styles) 

export default class LoginPage extends React.Component { 
    constructor (props) { 
    super(props) 
    this.loginUser = this.loginUser.bind(this) 
    } 

    loginUser() { 
    console.log(` 
     Email: ${this.refs.email.state.value} Password: ${this.refs.password.state.value} 
    `) 
    } 

    render() { 
    return (
     <main className={cx('LoginPage')}> 
     <div className={cx('container')}> 
      <Form onSubmit={this.loginUser}> 
      <Input type='email' placeholder='email' ref='email' /> 
      <Input type='password' placeholder='password' ref='password' /> 
      <Input type='submit' value='Log in' /> 
      </Form> 
     </div> 
     </main> 
    ) 
    } 
} 

LoginPageコンポーネントで使用されている方法ですthis.refs.email.state.valueを使用することは、入力コンポーネントの値をその状態から取得するための有効なアプローチですか？

Answer 1

あなたのケースではrefsは必要ありません。 propsの通常のデータフローで同じ処理を実行できる場合は使用しないでください。あなたが反応して、いくつかのアプリをプログラムしていない場合はthe docs

から、あなたの最初の 傾きは、通常のアプリでは「起こる ものを作る」へのREFを使用しようとすることになるだろう。これが当てはまる場合は、 という階層でコンポーネントの所在を厳密に把握する必要があります。 多くの場合、 状態を「所有する」適切な場所が階層の上位にあることが明らかになります。そこに状態を置くこと では、代わりに の代わりに、データフローがあなたの目標を達成するために、 "物事を起こす"ための参照を使用するという欲求を排除します。

もう1つの警告記号はstring refs are considered legacyであり、非推奨となります。

入力の変更を個別に処理し、それをローカルコンポーネントの状態に保つことが、より良い安全な方法です。したがって、コードは次のようになります。

// ...imports... 

const cx = classNames.bind(styles) 

const initialState = { 
    eamil: '', 
    password: '', 
}; 

export default class LoginPage extends React.Component { 
    constructor (props) { 
    super(props); 
    this.loginUser = this.loginUser.bind(this); 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
    let nextState = {}; 
    nextState[e.target.name] = e.target.value; 
    this.setState(nextState); 
    } 

    loginUser() { 
    e.preventDefault(); 
    console.log(` 
     Email: ${this.state.email} Password: ${this.state.password} 
    `) 
    } 

    render() { 
    return (
     <main className={cx('LoginPage')}> 
     <div className={cx('container')}> 
      <Form onSubmit={this.loginUser}> 
      <Input 
       type='email' 
       value={this.state.email} 
       placeholder='email' 
       onChange={this.handleChange} 
      /> 
      <Input 
       type='password' 
       value={this.state.password} 
       placeholder='password' 
       onChange={this.handleChange} 
      /> 
      <Input type='submit' value='Log in' /> 
      </Form> 
     </div> 
     </main> 
    ) 
    } 
} 

ここで、状態はフォームコンポーネントの一番上にあります。より一般的なものにして、form Reduxストアに独自のアクションとレデューサーを持たせることもできますが、それはあなたに考えを与えるはずです。

コードに関するご質問がありましたら教えてください。

Answer 2

this.refs.email.state.valueではなくthis.refs.email.valueを使用してください。 はい、それはあなたがのEventListenerのonClickを取り付けた状態で、電子メールを保つことができる

OR

を反応させるのに標準的な方法です。

export default class LoginPage extends React.Component { 
    constructor (props) { 
    super(props) 
    this.loginUser = this.loginUser.bind(this) 
    } 

    loginUser() { 
    console.log(` 
     Email: ${this.refs.email.value} Password: ${this.refs.password.value} 
    `) 
    } 

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

    render() { 
    return (
     <main className={cx('LoginPage')}> 
     <div className={cx('container')}> 
      <Form onSubmit={this.loginUser}> 
      <Input type='email' value={this.state.value} onClick={this.changeEmail} placeholder='email' ref='email' /> 
      <Input type='password' placeholder='password' ref='password' /> 
      <Input type='submit' value='Log in' /> 
      </Form> 
     </div> 
     </main> 
    ) 
    } 
}