繁体   English   中英

我如何从书路中解决问题以在第 78 页做出反应? 对于表格组件中的一种方法,我一直在取消定义

[英]How can i solve the problem from the book road to react at page 78 ? I keep getting undefine for one of the methods in the table component

import React, { Component } from 'react';
  import './App.css';

  const list = [
    {
      title: 'React',
      url: 'https://facebook.github.io/react/',
      author: 'Jordan Walke',
      num_comments: 3,
      points: 4,
      objectID: 0,
    },
    {
      title: 'Redux',
      url: 'https://github.com/reactjs/redux',
      author: 'Dan Abramov, Andrew Clark',
      num_comments: 2,
      points: 5,
      objectID: 1,
    },
  ];

  class App extends Component {


    state = {
      list,
      text: 'abc',
      searchTerm: ''
    }



    onDisMiss = (id) => {
      const updateList = this.state.list.filter((item) => item.objectID != id)
      return () => this.setState({ list: updateList })
    }

    onSearchChange = (event) => {
      this.setState({ searchTerm: event.target.value })
    }

    isSearched = (searchTerm) => {
      return (item) => item.title.toLowerCase().includes(searchTerm.toLowerCase())
    }

    render() {
      const { searchTerm, list } = this.state
      return (
        <div>
          <Search value={searchTerm}
            onChange={this.onSearchChange}>Search</Search>
          <Table list={list} pattern={searchTerm} onDissMiss={this.onDisMiss} />
        </div>
      );
    }
  }


  class Search extends Component {
    render() {
      const { value, onChange, children } = this.props
      return (
        <div>
          <form>
            {children}<input type="text" onChange={onChange} value={value} />
          </form>
        </div>
      );
    }
  }


  class Table extends Component {

    render() {
      const { list, pattern, onDisMiss } = this.props
      return (
        <div>
          {list.filter(isSearched(pattern)).map(item =>
            <div key={item.objectID}>
              <span><a href={item.url}>{item.title}</a></span>
              <span>{item.author}</span>
              <span>{item.num_comments}</span>
              <span>{item.points}</span>

              <span>
                <button onClick={onDisMiss(item.objectID)} type="button">Dismiss</button>
              </span>

            </div>)
          }
        </div>
      );
    }
  }
  export default App;

反应之路 Book The Table component related.I get undefined for the isSearched 方法 我该如何解决它,使其从书本上正常工作以做出反应,这本书似乎有一些错误,我无法解决这些错误,因为我只是在学习反应。 你能帮助解决这个问题吗?为什么这个问题实际上会发生

您应该将 isSearched 方法放入表 class 而不是 App class

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM