class Button extends Component{
  render(){
    const{
      onClick,
      //定义一个className属性，若没有指定className 属性,它的值就是一个空字符串,而			非undefined 。
      className='',
      children,
    }=this.props;
    return (
      <button 
      onClick={onClick}
      className={className}
      type="button"
      >
      {children}
      </button>
    );
  }
}

<span>
    <Button onClick={() => onDismiss(item.objectID)}>
   	 	Dismiss
    </Button>
</span>

const isSearched=serachTeam=>item=>
  item.title.toLowerCase().includes(serachTeam.toLowerCase());
//App没有改动
class　App extends Component{
  //构造函数
  constructor(){
    super();
    this.state={
      list,
      serachTeam:'',
    }
    //绑定删除函数
    this.onDissmisss=this.onDissmisss.bind(this);
    //绑定onSerachChange函数
    this.onSerachChange=this.onSerachChange.bind(this);
  }
  //删除函数
  onDissmisss(id){
    // 找到除点击外的其他id
    function isNotId(item){
      return item.objectID!==id;
    }
    //在原数组中筛选包含其他id的一个新的数组
    const updateList=this.state.list.filter(isNotId);
    // 重新设置state
    this.setState({list:updateList});
  }
  //onChange函数,event对象的target属性中带有输入框的值
  onSerachChange(event){
    // 得到我输入框的内容
    this.setState({serachTeam:event.target.value});
  }
  // render()函数,onChange 当内容发生改变时触发
  render(){
    const {serachTeam,list}=this.state;
    return(
      <div className="App">
        {/* 用于搜索的输入组件 */}
        <Search
          value={serachTeam}
          onChange={this.onSerachChange}
        >Search</Search>
        {/* 用于展示的列表组件 */}
        <Table
          list={list}
          pattern={serachTeam}
          onDissmisss={this.onDissmisss}
        />
        </div>         
    );
  }               
}
//将Button组件重构成函数式无状态组件
const Button=({onClick,className='',children,})=>
    <button 
      onClick={onClick}
      className={className}
      type="button"
    >
      {children}
    </button>
//将Search组件重构成函数式无状态组件
const Search =({value,onChange,children})=>
  // const {value,onChange,children}=props;
    <form>
      {children}<input
      type="text"
      value={value}
      onChange={onChange}
    />
    </form>
//将Table组件重构成函数式无状态组件
const Table=({list,pattern,onDissmisss})=>
    <div>
      {list.filter(isSearched(pattern)).map(item=>
        <div key={item.objectID}>
            <span>
              <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.points}</span>
            <span>{item.author}</span>
            <span>{item.num_comments}</span>
            <span>
              <Button onClick={()=>onDissmisss(item.objectID)}>
                Dissmiss  
              </Button> 
            </span>
        </div>
        )}
    </div>
export default App;