web-dev-qa-db-ja.com

Reactハンドル変更時に状態を介して値を渡す

私はreactのログインページにhandleChangeとhandleSubmitの2つのメソッドを使用しようとしています。状態内のユーザー名とパスワードに2つの値を設定し、入力がフォームの入力が変更されるたびに状態の値を更新してから、状態に保存されている値を使用して送信しようとしました。ただし、コンソールに出力すると、値は未定義を返します。 （p.s.セキュリティの達人全員のパスワードをまだ暗号化する必要があることは承知しています）。

私は反応するのが初めてなので、私のロジックに問題があるかもしれません：

Login.js

export default class Login extends React.Component {

constructor(props) {
    super(props);
    this.state = {uname: '', password: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
    this.setState({uname: event.target.uname, password: event.target.password});
}

handleSubmit(event) {
    alert('A username and password  was submitted: ' + this.state.uname + this.state.password);
    event.preventDefault();

    fetch('https://localhost:8080/login', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            uname: this.state.uname,
            password: this.state.password,
        })
    });
}

render() {

    return (
        <div>
            <Header titleName={"Login"}>
                <div className="container">
                    <div className="card"/>
                    <div className="card">
                        <h1 className="title">Login</h1>
                        <form onSubmit={this.handleSubmit}>
                            <div className="input-container">
                                <input name="uname" type="text" value={this.state.uname} id="#uname" required="required"
                                        onChange={this.handleChange}/>
                                <label form="#unamelabel">Username</label>
                                <div className="bar"/>
                            </div>
                            <div className="input-container">
                                <input name="password" type="password" value={this.state.password} id="#pass" required="required"
                                       onChange={this.handleChange}/>
                                <label form="#passlabel">Password</label>
                                <div className="bar"/>
                            </div>
                            <div className="button-container">
                                <button type="submit" value="Submit"><span>Go</span></button>
                            </div>
                            <div className="footer"><a href="#">Forgot your password?</a></div>
                        </form>
                    </div>
                </div>
            </Header>
            <Footer/>
        </div>
    );
}
}
javascriptreactjsreact-nativereact-routerreactive-programming
2
Joss MT

ハンドルの変更をこれに置き換えます

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

入力の名前ではなく、入力の値を状態に設定する必要があります

2
Gautam Naik

問題はhandleChange関数にあります。上記のコードでは、2つのフォーム入力に関連付けられた2つの異なる「イベント」オブジェクトがあります。それらのそれぞれには、独自のプロパティのセットがあります。次に例を示します。「event.target.name」は「input」タグで指定された「name」属性を格納し、「event.target.value」はユーザーが入力したデータを格納します。したがって、handleChangeの実装を次のいずれかに変更します

（A）詳細

handleChange(event) {
     if (event.target.name == "uname") {
              this.setState({
                uname: event.target.value
              });
            }
      if (event.target.name == "password") {
              this.setState({
                password: event.target.value
              });
            }
    }

ここで、「name」属性をunameまたはpasswordのいずれかに一致させ、それに応じて状態を設定できます。

（B）簡潔

  handleChange(event) {
    this.setState({
        [event.target.name]: event.target.value
    });
}
1
Aditya

React statefullコンポーネント内の入力の値を取得する場合は、この入力のrefプロパティを次のように設定する必要があります。

<input name="username" ref={node => this.username = node} />

次にthis.usernameを呼び出すと、ユーザー名入力の実際の値が返されます。

送信アクションで状態を設定する必要はありません。これにより、文字が入力値をプッシュするたびにコンポーネントが再レンダリングされるためです。

詳細 react doc

1
Simon Mulquin

HandleChangeはsetStateがevent.tagert.name = event.target.value：である必要があると思います。

 handleChange(evt) {
    this.setState({
      [evt.target.name]: evt.target.value,
    });
  }
0
Pankti Parikh