[英]Function not working on onClick event in React.js
我正在編寫一個React程序,其中數據將通過API提取並顯示在表格中。 有3個主要文件App.js,Table.js和Search.js和Button.js。 正在顯示數據,搜索正在工作,但刪除按鈕不起作用。 我寫了一個用於刪除按鈕的函數,我想那是錯誤的,但是不知道是什么。
App.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;
Table.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;
Button.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 onClick={onClick} className={className} >{children}</button>
處理程序需要引用傳入的props,它們是this.props.onClick,而不是this.props.onclick(您擁有)。
您遇到的錯誤可以通過修改App.js來解決:
onDismiss = id => {
if (id) {
const deleteList = this.state.list.filter(item => item.objectID !== id);
// setting state of list to lastest deleteList
this.setState({
result:deleteList
})
}
}
In Button組件更改
const{onclick,className='',children}=props;
至
const{onClick,className='',children}=props;
而且似乎您還沒有在狀態中設置列表,因此當您嘗試訪問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}
})
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.