react实现父传子子传父

  render() {
    //解构
    let { data } = this.state;
    return (
      <ul>
        {
          data.map((item, index) => {
            return <List key={index} {...item} change={index => this.change(index)} />
          })
        }
      </ul>
    )
  }

  change(id) {
    //子传父
    let newarr = this.state.data;
    newarr.filter(item => {
      if (item.id == id) {
        item.flag = !item.flag
      }
    })
    //刷新数据
    this.setState({
      data:newarr
    })
  }

 render() {
        return (
            <li>
                <img src={this.props.img}  />
                <span className="name">{this.props.name}</span>
                <button onClick={() => { this.props.change(this.props.id) }} className={this.props.flag ? "grey" : "green"}>
　　　　　　　　　　{this.props.flag ? "已添加" : "添加"}</button>
            </li>
        )
    }