简体   繁体   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;

Road to react Book The Table component related.I get undefined for the isSearched method .反应之路 Book The Table component related.I get undefined for the isSearched 方法 how can I fix it so it works correctly its from the book road to react it seems like the book has a few error which I have problems solving because am just learning react.我该如何解决它,使其从书本上正常工作以做出反应,这本书似乎有一些错误,我无法解决这些错误,因为我只是在学习反应。 can you help with the solution and why this problem is actually happening你能帮助解决这个问题吗?为什么这个问题实际上会发生

You should put the isSearched method inside the Table class and not the App class您应该将 isSearched 方法放入表 class 而不是 App class

暂无
暂无

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

相关问题 如何使用 React 功能组件解决“HTMLMediaElement 之前已连接到不同的 MediaElementSourceNode”问题 - How can I solve "HTMLMediaElement already connected previously to a different MediaElementSourceNode" problem using React functional component 在 React/Next.js 中,如何简单地将数据从一个页面的组件传递到另一个页面上的组件? - How can I simply pass data from a component one page to a component on another page in React/Next.js? 如何将 function 从一个组件调用到另一个组件? 反应 - How can I call a function from one component to another? React 我如何解决在我的 wordpress 网站上找不到页面的问题 - How can i solve page not found problem on my wordpress website 我如何通过RxJS限制对React组件方法的调用 - How can I throttle calls of methods of a react component via RxJS 我如何使用ES6在React组件中保持状态 - How can i keep state in a React component using ES6 我如何才能将一个组件与另一个组件进行反应 - How I can one component to another component in react 我如何路由来自同一个组件的多个实例并在 vue 中保持 state - how can i route multi instance that are from the same one component and keep themself state in vue 我怎样才能用数组方法解决这个练习? - how can i solve this exercise with array methods? 如何在 React 中不调用该组件的情况下将数据从一个组件发送到另一个组件? - How can I send data from one component to another without calling that component in React?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM