ReactJS + Reduxでは、Material-UIのTextField
,http://www.material-ui.com/#/components/text-fieldを使用して、私は現在、firstName、lastName、birthMonth、birthDay、birthYearをユーザーが入力するフォームを持っています。ReactJS + Redux:フォームの状態を維持するための適切で正しい方法は何ですか?
私はすべての入力に対して作用を有する、あまりにもそれをすべての変更を更新するという点で、以下を持って、それすべての作品をが、特に誕生日のために、非常に冗長なように思える、例えば:
コンポーネントInputComponent.js
で:
updateFirstName(event) {
this.props.actions.updateFirstName(event.target.value)
}
updateLastName(event) {
this.props.actions.updateLastName(event.target.value)
}
updateBirthMonth(event) {
this.props.actions.updateBirthMonth(event.target.value)
}
updateBirthDay(event) {
this.props.actions.updateBirthDay(event.target.value)
}
updateBirthYear(event) {
this.props.actions.updateBirthYear(event.target.value)
}
<TextField
hintText="Enter First Name"
onChange={this.updateFirstName}
value={this.props.userInfo.firstName}
/>
<TextField
hintText="Enter Last Name"
onChange={this.updateLastName}
value={this.props.userInfo.lastName}
/>
<TextField
hintText="Enter Birth Month"
onChange={this.updateBirthMonth}
value={this.props.userInfo.birthMonth}
/>
<TextField
hintText="Enter Birth Day"
onChange={this.updateBirthDay}
value={this.props.userInfo.birthDay}
/>
<TextField
hintText="Enter Birth Year"
onChange={this.updateBirthYear}
value={this.props.userInfo.birthYear}
/>
:私の減速で、その後
updateFirstName(eventValue) {
return {
type: 'UPDATE_FIRST_NAME',
firstName: eventValue
}
},
updateLastName(eventValue) {
return {
type: 'UPDATE_LAST_NAME',
lastName: eventValue
}
},
updateBirthMonth(eventValue) {
return {
type: 'UPDATE_BIRTH_MONTH',
birthMonth: eventValue
}
},
updateBirthDay(eventValue) {
return {
type: 'UPDATE_BIRTH_DAY',
birthDay: eventValue
}
},
updateBirthYear(eventValue) {
return {
type: 'UPDATE_BIRTH_YEAR',
birthYear: eventValue
}
},
、userReducer.js
:
const userReducer = function(userInfo = {}, action){
switch(action.type){
case 'UPDATE_FIRST_NAME':
return {
...userInfo,
firstName: action.firstName
}
case 'UPDATE_LAST_NAME':
return {
...userInfo,
lastName: action.lastName
}
case 'UPDATE_BIRTH_MONTH':
return {
...userInfo,
birthMonth: action.birthMonth
}
case 'UPDATE_BIRTH_DAY':
return {
...userInfo,
birthDay: action.birthDay
}
case 'UPDATE_BIRTH_YEAR':
return {
...userInfo,
birthYear: action.birthyear
}
default:
return userInfo
}
}
export default userReducer
ReactJS + Reduxのために、入力のフォームを処理するためのより良い、より適切かつ効率的な練習はありますか?
ありがとうございます!
:
フォームは、この(example from here)のようなものになります。多くの定型文は一般的な苦情です。あなたがそれを見ていない場合は、https://github.com/reactjs/redux/blob/master/docs/recipes/ReducingBoilerplate.mdを読んでください。 – Jacob