Reactはtodolistの追加、削除、変更、クエリを実装します

ToDoリストを例に挙げましょう

ここに画像の説明を挿入

ディレクトリは次のとおりです

ここに画像の説明を挿入

アプリ

 React をインポートします。{ PureComponent } から 'react' をインポートします。
'./components/Input' から Input をインポートします。
'./components/List' からリストをインポートします。
'./components/Total' から Total をインポートします。
'./components/Mask' からマスクをインポートします。
'./components/bus' から { bus を $bus としてインポートします
'./App.css' をインポートします
デフォルトクラスAppをエクスポートし、PureComponentを拡張します。
  コンストラクタ() {
    素晴らしい（）
    この状態 = {
      フラグ: false、
      リスト: [
        {
          id: 1,
          内容: 「ハハハ」、
          チェック済み: false
        },
        {
          id: 7,
          内容: 「ハハハ」、
          チェック済み: false
        },
        {
          id: 5,
          内容: 「ハハハ」、
          チェック済み: false
        },
      ]、
      すべてチェック: false、
      選択長さ: 0,
      アイテム： {}
    }
  }
  // すべて選択またはすべて選択解除 checkAllHandler(checked) {
    console.log("チェック済み",チェック済み);
    const { リスト } = this.state
    const newList = list.map(item =>{
      {...item,checked} を返します
    })
    this.setState({list:newList,checkAll:checked},()=>{
      this.doneLength()
    })
  }
  // 単一選択 単一選択 checkHandler =(id,checked)=> {
    const { リスト } = this.state
    const newList = list.map(item => {
      item.id === id ? {...item,checked} を返します: item
    })
    checkAll = newList.length && newList.every(item => item.checked) とします。
    this.setState(() => ({リスト: newList,checkAll}),()=>{
      this.doneLength()
    })
  }
  // 追加 addHandler = (obj)=>{
    {リスト} = this.state;
    newList = [...list,obj] とします
    console.log('新しいリスト===='+新しいリスト)
    this.setState({
      リスト: newList、
    },()=>{
      this.doneLength()
    })
  } 
  // 検索 searchHandler=(content)=>{
    console.log("コンテンツ",コンテンツ);
    {リスト} = this.state;
    newList を list.filter(item => item.content.includes(content)) にします。
    this.setState({
      リスト: 新しいリスト
    },()=>{
      this.doneLength()
    })
  }
  // 削除 delHandler = (id)=> {
    コンソールにログ出力します。
    const { リスト } = this.state
    const newList = list.filter(item => item.id !=id)
    checkAll = newList.length && newList.every(item => item.checked) とします。
    this.setState(() => ({リスト: newList,checkAll}),()=>{
      this.doneLength()
    })
  }
  // 編集 editHandler = (items)=>{
    this.setState({
      アイテム: アイテム
    })
  }
  // 更新 update = (content)=>{
    const { リスト、項目 } = this.state
    obj = Object.assign(item,{content}) とします。
    const newList = list.map(v => {
      if(v.id === obj.id) {
        v = {...オブジェクト}
      }
      リターンv
    })
    this.setState({
      リスト: newList、
      アイテム: オブジェクト
    })
  }
  // 完了 doneLenth=()=> {
    const { リスト } = this.state
    const newList = list.filter(item => item.checked)
    selectLength = newList.length とします
    タイムアウトを設定します(()=>{
      this.setState({
        長さを選択
      })
    })
  }
  // マウントcomponentDidMount() {
    this.unSubscribe = $bus.addListener("getFlag",(flag)=>{
      this.setState({flag})
    })
    this.unSubscribe1 = $bus.addListener("sendValue",(obj)=>{
     this.addHandler(obj)
    })
    this.unSubscribe2 = $bus.addListener("searchValue",(値)=>{
     this.searchHandler(値)
    })
    this.unSubscribe3 = $bus.addListener("getItem",(item)=>{
     this.editHandler(アイテム)
    })
    this.unSubscribe4 = $bus.addListener("更新",(コンテンツ)=>{
     this.update(コンテンツ)
    })
  }
  // アンマウントcomponentWillUnmount() {
    $bus.removeListener(this.unSubscribe)
    $bus.removeListener(this.unSubscribe1)
    $bus.removeListener(this.unSubscribe2)
    $bus.removeListener(this.unSubscribe3)
    $bus.removeListener(this.unSubscribe4)
  }
  与える（） {
    { フラグ、リスト、チェックすべて、選択長さ } = this.state
    戻る （
      <div クラス名 = 'コンテナ'>
        入力ボックス*/
        <入力></入力>
        {/* リスト */
        <リスト list={list} checkHandler={this.checkHandler} delHandler={this.delHandler}></リスト>
        {/* 統計 */}
        <合計 checkAllHandler={this.checkAllHandler.bind(this)} checkAll={checkAll} selectLength={selectLength}></合計>
        ポップアップボックスの編集 */
        { フラグ ? <マスク></マスク> : ''}
      </div>
    ）
  }
}

入力.js

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'./bus' から { bus を $bus としてインポートします
デフォルトクラス Input をエクスポートし、Component を拡張します {
  コンストラクタ() {
    素晴らしい（）
    この状態 = {
      価値：""
    }
  }
  チェンジハンドラ = (e)=>{
    this.setState({
      値: e.target.value
    })
    console.log("this.state.value",this.state.value);
  }
  // 追加 addHandler = ()=>{
    {値} = this.state; とします。
    obj = {
      id: Date.now(),
      コンテンツ: 価値、
      完了: false
    }
    if(値) {
      $bus.emit("sendValue",obj)
    } それ以外 {
      console.log("入力してください")
    }
  }
  // 検索 searchHandler = ()=>{
    console.log("検索");
    {値} = this.state; とします。
    if(!value) return console.log("入力してください");
    $bus.emit("検索値",値)
  }
  与える（） {
    {値} = this.stateとする
    戻る （
      <>
        <div クラス名="入力">
          <input type="text" value={value} placeholder='タスク名を入力し、Enter キーを押して確定してください' onInput={this.changeHandler}/>
          <button className="btn btn-success" onClick={this.addHandler}>追加</button>
          <button className="btn btn-primary" onClick={this.searchHandler}>検索</button>
        </div>
      </>
    ）
  }
}

リスト.js

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'./Item' からアイテムをインポートします
'prop-types' から PropTypes をインポートします
デフォルトのクラスListをエクスポートし、Componentを拡張します。
  静的プロパティタイプ = {
		リスト:PropTypes.array.isRequired、
	}
  与える（） {
    list、checkHandler、checkAllHandler、delHandler を this.props に設定します。
    console.log("リスト",リスト);
    戻る （
      <ul className="タスクリスト">
        {
          list.map(item => (<Item item={item} key={item.id} checkHandler={checkHandler} checkAllHandler={checkAllHandler} delHandler={delHandler}></Item>))
        }
      </ul>
    ）
  }
}

アイテム.js

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'./bus' から { bus を $bus としてインポートします
デフォルトのクラスItemをエクスポートし、Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具)
    this.state = {}
  }
  changeHandler = (id)=>{
    checkHandler を this.props に設定します。
    戻り値 (e)=>{
      checkHandler(id、e.target.checked) は、
    }
  }
  削除ハンドラ(){
    delHandler を this.props とします。
    delHandler(引数[0])
  }
  editHadnler = (item)=>{
    $bus.emit("getFlag",true)
    localStorage.setItem("obj",JSON.stringify(item))
    $bus.emit("getItem",アイテム)
  }
  与える（） {
    {item} = this.props; とします。
    戻る （
      <li className="タスク項目">
        <input type="checkbox" チェック済み={item.checked} onChange={this.changeHandler(item.id)}/>
        <div クラス名="コンテンツ">
          {アイテムコンテンツ}
        </div>
        <button className={`btn btn-success ${!item.checked ? "d-none" : "d-block"}`} onClick={()=> this.editHadnler(item)}>編集</button>
        <button className={`btn btn-danger ${!item.checked ? "d-none" : "d-block"}`} onClick={this.removeHandler.bind(this,item.id)}>削除</button>
      </li>
    ）
  }
}

合計.js

React をインポートします。{ コンポーネント } を 'react' からインポートします。
エクスポートデフォルトクラスTotalはComponentを拡張します{
  コンストラクタ() {
    素晴らしい（）
    this.changeAllHandler = this.changeAllHandler.bind(this)
  }
  すべてのハンドラを変更する(e) {
    { checkAllHandler } = this.props とします。
    checkAllHandler(e.target.checked)
  }
  与える（） {
    checkAll、selectLength を this.props に設定します。
    戻る （
      <div className="タスク完了">
        <input type="checkbox" onChange={this.changeAllHandler} チェック済み={checkAll}/>
        <p>完了しました<span className="single-number">{selectLength}</span> すべて<span className="all-number">4</span></p>
      </div>
    ）
  }
}

Mask.js (ポップアップウィンドウ)

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'./bus' から { bus を $bus としてインポートします
エクスポートデフォルトクラスマスクはComponentを拡張します{
  コンストラクタ() {
    素晴らしい（）
    この状態 = {
      価値： ''
    }
  }
  closeMask = ()=>{ // ポップアップウィンドウを閉じる$bus.emit("getFlag",false)
  }
  アップデートハンドラ = ()=>{
    $bus.emit("getFlag",false)
    $bus.emit("更新",this.state.value)
  }
  onChange = (e) => {
    this.setState({
      値: e.target.value
    })
  }
  コンポーネントマウント() {
    obj = JSON.parse(localStorage.getItem("obj")) とします。
    this.setState({
      値: obj.content
    })
  }
  与える（） {
    {値} = this.stateとする
    戻る （
      <div>
        <div className="mm-mask">
        <div className="mm-modal">
          <div className="mm-title">
            <span className="mm-edit">編集</span>
            <span className="mm-close" onClick={this.closeMask}>x</span>
          </div>
          <div className="mm-content">
            <input type="text" value={value} placeholder="タスク名" onInput={this.onChange}/>
          </div>
          <div className="mm-box-btn">
            <div className="mm-update" onClick={this.updateHandler}>更新</div>
            <div className="mm-cancel" onClick={this.closeMask}>キャンセル</div>
          </div>
        </div>
      </div>
      </div>
    ）
  }
}

バス

 糸追加 -D イベント
'events' から { EventEmitter } をインポートします
export const bus = new EventEmitter() // バスインスタンスをエクスポートする

アプリケーション.css

* {
  マージン: 0;
  パディング: 0;
}
入力、ボタン{
  アウトライン: なし;
  境界線: 0;
}
ul>li {
  リストスタイル: なし;
}
。容器 {
  幅: 400ピクセル;
  高さ: 500px;
  マージン: 10px 自動 自動;
  パディング: 20px;
  ボックスのサイズ: 境界線ボックス;
  色: #3333;
  境界線: 1px 実線;
  オーバーフロー: 非表示;
}
.入力{
  幅: 100%;
  高さ: 30px;
  ディスプレイ: フレックス;
}
入力{
  幅: 100%;
  高さ: 100%;
  境界線: 1px 実線 #e1e1e1;
  ボックスのサイズ: 境界線ボックス;
  境界線の半径: 4px;
  パディング: 0 10px;
}
入力::プレースホルダー{
  色: #e1e1e1;
}
入力:フォーカス{
  境界線: 1px 実線 #0096e6;
}
.タスクリスト{
  幅: 100%;
  ディスプレイ: フレックス;
  flex-flow: 列の折り返し;
  上マージン: 10px;
}
.タスクリスト li {
  ディスプレイ: フレックス;
  高さ: 40px;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  パディング: 0 10px;
  背景色: #eef0f4;
  下マージン: 10px;
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
  空白: ラップなし;
}
.task-list li 入力[type^="checkbox"] {
  幅: 15px;
  高さ: 15px;
  境界線: 1px 実線 #e1e1e1;
  カーソル: ポインタ;
  フレックス収縮: 0;
}
.タスクリスト li .コンテンツ {
  フレックス: 1;
  左マージン: 10px;
}
.btn{
  フレックス収縮: 0;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  高さ: 30px;
  コンテンツの中央揃え: 中央;
  パディング: 5px 10px;
  テキスト配置: 中央;
  カーソル: ポインタ;
  境界線の半径: 4px;
  色: #fff;
  文字間隔: 2px;
  マージン: 0 5px;
  ボックスのサイズ: 境界線ボックス;
  フォントサイズ: 16px;
}
.btn-成功{
  背景色: #0f0;
}
.btn-危険{
  背景色: #f00;
}
.btn-プライマリ{
  背景色: #0096e6;
}
.タスク完了{
  幅: 100%;
  高さ: 40px;
  行の高さ: 40px;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  背景色: #eef0f4;
  左パディング: 10px;
  ボックスのサイズ: 境界線ボックス;
  上マージン: 30px;
}
.task-done 入力 {
  幅: 15px;
  高さ: 15px;
  境界線: 1px 実線 #e1e1e1;
  カーソル: ポインタ;
  フレックス収縮: 0;
  右マージン: 10px;
}
.単数 {
  色: #333;
  左マージン: 5px;
}
.全数字 {
  色: 赤;
  左マージン: 5px;
}
.mm-マスク{
  位置:固定;
  トップ:0;
  左:0;
  右:0;
  下:0;
  背景:rgba(0,0,0,0.5);
}
.mm-モーダル{
  幅:350ピクセル;
  位置:絶対;
  上位:50%;
  残り:50%;
  変換:translate(-50%,-50%);
  zインデックス:1000;
  背景:#ffffff;
  境界線の半径:4px;
  色:#333333;
}
.mm-タイトル{
  高さ:50px;
  行の高さ:50px;
  ディスプレイ:フレックス;
  コンテンツの両端揃え:スペースの間;
  ボーダー下部:1px 実線 #e1e1e1;
  ボックスのサイズ:境界線ボックス;
  フォントサイズ:20px;
}
.mm-編集{
  テキストインデント:20px;
}
.mm-閉じる{
  右マージン:20px;
  フォントファミリ:consals;
  カーソル:ポインタ;
}
.mm-コンテンツ{
  パディング:0 20px;
  下マージン:20px;
}
.mm-コンテンツ入力{
  幅:100%;
  高さ:30px;
  行の高さ:30px;
  テキストインデント:20px;
  境界線の半径:4px;
  上マージン:20px;
  境界線:1px 実線 #666;
  ボックスのサイズ:境界線ボックス;
}
.mm-content 入力:hover{
  境界線:1px実線 #0096e6;
}
.mm-content 入力:最後の子{
  テキストインデント:5px;
}
.mm-box-btn{
  ディスプレイ:フレックス;
}
.mm-更新、.mm-キャンセル{
  幅:80ピクセル;
  高さ:30px;
  行の高さ:30px;
  テキスト配置: 中央;
  カーソル:ポインタ;
  背景:#0096e6;
  色:#ffffff;
  ユーザー選択:なし;
  境界線の半径:4px;
  マージン:0 20px 50px;
}
.mm-更新{
  右マージン:10px;
}
.d-なし{
  表示: なし;
}
.dブロック{
  表示: ブロック;
}