作成します https://github.com/storenth/react-redux-todo そして、プログラミングパターンについて私のTodo-react-appを確認するように依頼します。コンポーネントをプレゼンテーションコンポーネントとコンテナコンポーネントに分割します。

その背後にある基本的な考え方は次のとおりです。コンポーネントに状態が必要な場合、小道具に基づいて計算を行う場合、またはその他の複雑なロジックを管理する必要がある場合、そのコンポーネントはHTMLのようなJSXをレンダリングする必要もありません。

HTMLのようなJSXをレンダリングする代わりに、コンポーネントは別のコンポーネントをレンダリングする必要があります。HTMLのようなJSXをレンダリングするのはそのコンポーネントの仕事であるはずです。

だから、/containers/TodosContainerそれについての私の質問にはとが含まれ/components/Todosてい/components/AddFormます。パターンと一致していますか？どこに置くか私が取得できませんでしたAddForm、内部/components/Todos（複合体Iの推測にしますか）？

import React, { Component, Fragment } from 'react';
import { Todos } from "../components/Todos";
import { AddForm } from "../components/AddForm";

export class TodosContainer extends Component {
    constructor(props) {
        super(props);
        this.state = { items: [], text: '' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.removeItem = this.removeItem.bind(this);
    }
    handleChange = (e) => {
        this.setState({
            text: e.target.value
        })
    }
    handleSubmit = (e) => {
        e.preventDefault();
        if (this.state.text.length === 0) {
            return;
        }
        const newItem = {
            text: this.state.text,
            id: Date.now()
        };
        this.setState({
            items: this.state.items.concat(newItem),
            text: ''
        })
    }
    removeItem = (id) => {
        const items = this.state.items.filter(item => {
            return item.id !== id;
        })
        this.setState({
            items
        })
        console.log(this.state);
    }

    render() {
        return (
            <>
                <Todos items={this.state.items} removeItem={this.removeItem} />
                <AddForm items={this.state} onSubmit={this.handleSubmit} onChange={this.handleChange} />
            </>
        )
    }
}
```

ダン・アブラモフが説明したプレゼンテーションとコンテナコンポーネントのパターンであれば、そうです、かなり効果的に釘付けになっています。（ダンはもはやこのパターンを支持していませんが!!）

提案/レビュー

AddForm

itemspropは実際textには親コンポーネントの状態であり、状態オブジェクト全体を必要としません。（そうであれば、より正確に名前を付けます！）使用されるのは入力値だけなのでvalue、より適切な記述子です。

export const AddForm = ({ value, onSubmit, onChange }) => {
  console.log(value);
  return (
    <div className="add-item-form">
      <form onSubmit={e => onSubmit(e)}>
        <label htmlFor="name">Add new todo:</label>
        <input
          type="text"
          id="name"
          onChange={e => onChange(e)}
          value={value}
        />
        <button
          className="btn waves-effect waves-light"
          type="submit"
          name="action"
        >
          Add item
        </button>
      </form>
    </div>
  );
};

使用法： <AddForm value={this.state.text} ... />

TodosContainer

ハンドラーはすべて矢印関数でthisあり、クラスのが既にバインドされているため、コンストラクターでハンドラーをバインドする必要はありません。実際、コンストラクターが実行しているのが初期状態の設定だけである場合は、状態インスタンス変数を使用して初期状態を設定するだけなので、コンストラクターも実際には必要ありません。

の代わりに

constructor(props) {
  super(props);
  this.state = { items: [], text: '' };
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
  this.removeItem = this.removeItem.bind(this);
}

単に

state = { items: [], text: '' };

状態の更新

場合はいずれかの次の状態が現在の状態に依存し、カウンターをインクリメント、または配列に値を追加するように、あなたは、機能状態の更新を使用して、そしてまた、参照していないのが習慣に取得する必要this.state状態更新内。

状態とライフサイクル setState

handleSubmit 改善できる

handleSubmit = (e) => {
  e.preventDefault();
  const newItem = {
    text: this.state.text,
    id: Date.now(),
  };
  if (this.state.text) { // <-- if text is truthy, i.e. non-empty string
    this.setState(prevState => ({
      items: prevState.items.concat(newItem), 
    }));
  }
}

状態の更新も非同期であるため、状態の更新を要求した後にconsole.logを作成しようとしないでください。componentDidUpdate更新後の状態をログに記録するようなコンポーネントライフサイクルを使用します（またはクラスベースのコンポーネントの場合は、setState 2ndパラメーターコールバック関数を使用できますが、簡単にするためにライフサイクル関数に固執します）。

removeItem ハンドラーを改善できます

removeItem = (id) => {
  this.setState(prevState => ({
    items: prevState.items.filter(item => item.id !== id),
  }));
}