作成、読み取り、更新、削除に使用されるフォームが 1 つあります。同じフォームで 3 つのコンポーネントを作成しましたが、それぞれ異なるプロパティを渡しています。CreateForm.js、ViewForm.js (削除ボタン付きの読み取り専用)、UpdateForm.js です。
私は以前 PHP を使用していたので、これらを常に 1 つの形式で実行していました。
ストアの管理には React と Redux を使用します。
createForm={true}
CreateForm コンポーネントでは、入力に値を入力しないように、また入力を無効にしないように、このプロパティをサブコンポーネントに渡します。ViewFormコンポーネントでは、このプロパティを渡しますreadonly="readonly"
。
また、値が入力されていて更新できないテキストエリアで別の問題が発生しました。値を持つReactテキストエリアは読み取り専用ですが、更新する必要があります
フォームのさまざまな状態を処理するコンポーネントを 1 つだけ持つ最適な構造は何でしょうか?
共有できるアドバイス、チュートリアル、ビデオ、デモはありますか?
ベストアンサー1
私は見つけたリダックスフォームパッケージ。本当に良い仕事をしてくれます!
だから、戻ってきたとReact-Redux。
まず、フォーム コンポーネントを作成する必要があります (当然のことですが)。
import React from 'react';
import { reduxForm } from 'redux-form';
import validateContact from '../utils/validateContact';
class ContactForm extends React.Component {
render() {
const { fields: {name, address, phone}, handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit}>
<label>Name</label>
<input type="text" {...name}/>
{name.error && name.touched && <div>{name.error}</div>}
<label>Address</label>
<input type="text" {...address} />
{address.error && address.touched && <div>{address.error}</div>}
<label>Phone</label>
<input type="text" {...phone}/>
{phone.error && phone.touched && <div>{phone.error}</div>}
<button onClick={handleSubmit}>Submit</button>
</form>
);
}
}
ContactForm = reduxForm({
form: 'contact', // the name of your form and the key to
// where your form's state will be mounted
fields: ['name', 'address', 'phone'], // a list of all your fields in your form
validate: validateContact // a synchronous validation function
})(ContactForm);
export default ContactForm;
その後、フォームを処理するコンポーネントを接続します。
import React from 'react';
import { connect } from 'react-redux';
import { initialize } from 'redux-form';
import ContactForm from './ContactForm.react';
class App extends React.Component {
handleSubmit(data) {
console.log('Submission received!', data);
this.props.dispatch(initialize('contact', {})); // clear form
}
render() {
return (
<div id="app">
<h1>App</h1>
<ContactForm onSubmit={this.handleSubmit.bind(this)}/>
</div>
);
}
}
export default connect()(App);
そして、結合されたリデューサーに redux-form リデューサーを追加します。
import { combineReducers } from 'redux';
import { appReducer } from './app-reducers';
import { reducer as formReducer } from 'redux-form';
let reducers = combineReducers({
appReducer, form: formReducer // this is the form reducer
});
export default reducers;
バリデータモジュールは次のようになります。
export default function validateContact(data, props) {
const errors = {};
if(!data.name) {
errors.name = 'Required';
}
if(data.address && data.address.length > 50) {
errors.address = 'Must be fewer than 50 characters';
}
if(!data.phone) {
errors.phone = 'Required';
} else if(!/\d{3}-\d{3}-\d{4}/.test(data.phone)) {
errors.phone = 'Phone must match the form "999-999-9999"'
}
return errors;
}
フォームが完了した後、すべてのフィールドに何らかの値を入力する場合は、次のinitialize
関数を使用できます。
componentWillMount() {
this.props.dispatch(initialize('contact', {
name: 'test'
}, ['name', 'address', 'phone']));
}
フォームに入力する別の方法は、initialValues を設定することです。
ContactForm = reduxForm({
form: 'contact', // the name of your form and the key to
fields: ['name', 'address', 'phone'], // a list of all your fields in your form
validate: validateContact // a synchronous validation function
}, state => ({
initialValues: {
name: state.user.name,
address: state.user.address,
phone: state.user.phone,
},
}))(ContactForm);
他に対処方法がありましたら、メッセージを残してください。ありがとうございます。