クラスコンポーネントの数を最小限に抑え、すべてのロジックをできるだけ少ないコンポーネントに保持することが最善であることを学びました。SearchBarコンポーネントの入力タグにこれを配置することで、1つのクラスコンポーネントのみを含むToDoリストを作成することができました。
onChange={e => props.updateVal(e.target.value)}
それはまさに私が望むことを行い、その1つのデータを親のupdateVal関数に送り返します。
私が理解したいのは、すべてテキストフィールドであるいくつかの入力を含む1つのフォーム送信でこれを行う方法です。それも可能ですか？参照を避けて、コンポーネントをクラスに変更したいと思います。私は反応が上手になるので、これは私にとって単なる練習であり、どんな洞察もいただければ幸いです。
アプリケーション全体で使用できる再利用可能なコンポーネントの作成に重点を置きます。
たとえば、独自の再利用可能なものを作成できますinput。
import React from 'react';
// props will consist of "value", "onChange", "name" and a "placeholder"
const Input = props => <input type="text" {...props} />
export default Input;
次に、containerすべての入力を処理するを作成しますvalues。
import React, { Component } from 'react';
import Input from '../Input";
const fields = [
{
name: "company",
placeholder: "Company"
},
{
name: "email",
placeholder: "Email"
},
{
name: "firstName",
placeholder: "First Name"
},
{
name: "lastName",
placeholder: "First Name"
},
];
class Form extends Component {
state = { firstName: "", lastName: "", email: "", company: "" };
handleChange = ({ target: {name, value} }) => this.setState({ [name]: value });
handleSubmit = e => {
e.preventDefault();
alert(JSON.stringify(this.state, null, 4));
}
render = () => (
<form onSubmit={this.handleSubmit}>
{fields.map(props => <Input key="props.name" onChange={this.handleChange} {...props} /> )}
<button type="submit">Submit</button>
</form>
);
};
export default Form;
実例（1つのclassコンポーネントと1つの再利用可能なコンポーネント-クリックRun code snippet）：
const Input = props => <input type="text" {...props} />
const fields = [
{ name: "company", placeholder: "Company" },
{ name: "email", placeholder: "Email" },
{ name: "firstName", placeholder: "First Name" },
{ name: "lastName", placeholder: "First Name" }
];
class Form extends React.Component {
state = { firstName: "", lastName: "", email: "", company: "" };
handleChange = ({ target: {name, value} }) => this.setState({ [name]: value });
handleSubmit = e => {
e.preventDefault();
alert(JSON.stringify(this.state, null, 4));
}
render = () => (
<form onSubmit={this.handleSubmit}>
{fields.map(props => <Input key="props.name" onChange={this.handleChange} {...props}/>)}
<button type="submit">Submit</button>
</form>
);
};
ReactDOM.render(<Form />, document.body);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>さらに一歩進んで、Form再利用可能にすることができます。ただし、さまざまな入力、フィールドレベルの検証、およびフィールドのスタイル設定によってフォームが複雑になるため、保守が難しくなります。
class注目のフックに飛び込む前に、esの利用方法を学ぶことをお勧めします。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加