Fluxible react.js で入力フィールドをバインドするにはどうすればよいですか? todo のサンプル アプリを見ると、入力ボックスに onchange イベントをバインドし、それを onchange メソッドにバインドしています。複数のフィールドに対して同じ手法を実行するのは面倒です。フィールドごとに個別のメソッドとイベント ハンドラーを用意するのは面倒です。送信時に入力ボックスから値を取得する方法はありますか? フィールド値を状態に保存する必要がありますか?
import React from 'react';
import registerUser from '../actions/registerUser';
class Register extends React.Component {
constructor(props) {
super(props);
this.state = {
username:'',
password:'',
email:'',
errorMessage:null
};
//this.state = this.getStoreState();
}
register = (event, value) => {
event.preventDefault();
event.stopPropagation();
console.log(value);
let username = this.state.username.trim();
let password = this.state.password.trim();
let email = this.state.email.trim();
if (username && password && email) {
this.context.executeAction(registerUser, {
username: username,
password: password,
email: email
});
} else {
this.state.errorMessage = "missing required fields"
}
this.setState({text: event.target.value});
};
//todo handle error and success
render() {
return (
<div>
{this.state.errorMessage}
<form className="pure-form pure-form-stacked">
<fieldset>
<legend>Register</legend>
<input type="email" placeholder="Email" />
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button onClick={this.register} type="submit" className="pure-button pure-button-primary">Sign Up</button>
</fieldset>
</form>
</div>
);
}
}
export default Register;