函数不适用于 React.js 中的 onClick 事件

用户11066242

我正在编写一个反应程序,其中数据将通过 API 获取并显示在表格中。有 3 个主要文件 App.js、Table.js 和 Search.js 和 Button.js。正在显示数据,搜索正在运行,但删除按钮不起作用。我已经为删除按钮编写了一个函数,我想其中有问题,但不知道是什么。

应用程序.js

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


//API config
const DEFAULT_QUERY = 'react';
const PATH_BASE = 'https://hn.algolia.com/api/v1';
const PATH_SEARCH = '/search';
const PARAM_SEARCH = 'query=';

const url = `${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${DEFAULT_QUERY}`;


class App extends Component {
  constructor(){
    super();
    //here searchText is set to DEFAULT_QUERY which will return the result for keyword "redux"
    //refer line 8 to change
    this.state={
      searchText:'',
      result:''
    }
    this.onDismiss=this.onDismiss.bind(this);
    this.onSearchChange=this.onSearchChange.bind(this);
    this.searchStories=this.searchStories.bind(this);

    //this.isSearched=this.isSearched.bind(this);
  }

  //to add a delete button
  onDismiss=(id)=>{
    //filter out item array and return results with no matched id
    const deleteList=this.state.list.filter(item=>item.objectID!==id);
    //setting state of list to lastest deleteList
    this.setState({
      result:deleteList
    })  
  }
  //to add a search bar
  onSearchChange=(e)=>{
    //set state to value in search bar
    this.setState({
      [e.target.name]:e.target.value
    })
  }

  searchStories=(result)=>{
    this.setState({
      result
    });
  }
  //after mounting will fetch the api data
  componentDidMount(){
    fetch(url)
    .then(response => response.json())
    .then(result => this.searchStories(result));
  }

  render() {
    const {result,searchText}=this.state;
    if(!result){
      return null;
    }
    return(
      <div className="page">
          <div className="interactions">

        <Search
       searchText={searchText}
       onSearchChange={this.onSearchChange}
       >
        Search
        </Search>
        </div>
       <Table
       list={result.hits}
       onDismiss={this.onDismiss}
       searchText={searchText}/>

      </div>

    )

  }
}

export default App;

表.js

import React from 'react';
import Button from './Button';

const Table=(props)=>{
    const {list,searchText,onDismiss}=props;
    return(
        <div className="table">

       {/*Filter out item title and search title and give away results from item array */}
        {list.filter((item)=>{
          {/*The includes() method determines whether an array includes a certain value among its entries
          , returning true or false as appropriate. */}
          return item.title.toLowerCase().includes(searchText.toLowerCase());}).map((item)=>{

            return(

            <div key={item.objectID} className="table-row">
                  <span style={{ width: '40%' }}>
                        <a href={item.url}>{item.title}</a>
                        </span>
                        <span style={{ width: '30%' }}>
                        {item.author}
                        </span>
                        <span style={{ width: '10%' }}>
                        {item.num_comments} comments
                        </span>
                        <span style={{ width: '10%' }}>
                        ${item.points} points
                        </span>
                        <span style={{ width: '10%' }}>
                  <Button className="button-inline" onClick={()=>onDismiss(item.objectID)}>delete</Button>
                  </span>

            </div>

          )})}
      </div>
    )

  }


export default Table;

按钮.js

import React from 'react';

const Button=(props)=>{

    const{onclick,className='',children}=props;
    return(
      <div>
          <button onClick={onclick} className={className} >{children}</button>
      </div>
    )

  }


export default Button;
穆贾扬

在 Button 组件更改

const{onclick,className='',children}=props;

const{onClick,className='',children}=props;

此外,您似乎还没有在 state 中设置 list,因此当您尝试访问 this.state.list.filter 时,它会引发错误。

onDismiss=(id)=>{    
  const deleteList=this.state.result.hits.filter(item=>item.objectID!==id);    
  this.setState({
  result:{...this.state.result,hits:deleteList}
})  

}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

href链接不适用于Safari中的onclick事件

来自分类Dev

onclick事件不适用于选项

来自分类Dev

QuerySelectorAll不适用于onclick事件

来自分类Dev

onClick事件不适用于Android

来自分类Dev

React.js中的OnClick事件绑定

来自分类Dev

图像-React JS中的onclick事件

来自分类Dev

react.js 中的 onClick 事件错误

来自分类Dev

React中的OnClick事件

来自分类Dev

在React的onClick函数中传递事件对象

来自分类Dev

函数未在React中调用onclick事件

来自分类Dev

在React的onClick函数中传递事件对象

来自分类Dev

jQuery更改事件不适用于输入:Handlebars.js模板中的单选按钮

来自分类Dev

jQuery onclick事件不适用于td

来自分类Dev

onclick事件不适用于position:fixed

来自分类Dev

onclick事件不适用于多种功能

来自分类Dev

onclick事件不适用于替换的片段

来自分类Dev

Onclick事件不适用于提交类型按钮

来自分类Dev

HTML 5模式不适用于按钮的onclick事件

来自分类Dev

onclick事件不适用于svg元素

来自分类Dev

多个 OnClick 事件不适用于所有对象

来自分类Dev

React.JS - 在 `onClick` 事件上调用函数会导致 `this` 在函数中未定义

来自分类Dev

刷新不适用于React JS中的子菜单路径

来自分类Dev

Enter 和 Backspace 不适用于 React 中的 Slate.js 编辑器

来自分类Dev

CSS 不适用于 React 中的 intro.js 模块

来自分类Dev

JS事件委托不适用于某些组件

来自分类Dev

Hammer.js:滑动事件不适用于图像

来自分类Dev

模糊事件不适用于淘汰赛js

来自分类Dev

Hammer.js:滑动事件不适用于图像

来自分类Dev

触摸事件不适用于Angular中的Google Maps