Question

我是新来的人。
我正在尝试将道具从子组件传递到具有收藏夹选项卡的父组件选项卡。
所以我想我将通过handleClickOpen方法传递值，因为那是我单击收藏夹图标的位置。
但不确定如何通过。
当我单击卡片组件中的收藏夹时，应该将其保存在“收藏夹”选项卡中。
您能告诉我如何修复它，以便将来我自己修复。
因为传递道具是重要的概念。
我所有的代码都在tab-demo.js中

 <CardActions className={classes.actions} disableActionSpacing>
                    <IconButton
                      onClick={this.handleClickOpen}
                      aria-label="Add to favorites"
                    >
                      <FavoriteIcon />
                    </IconButton>

     <AppBar position="static" color="default">
          <Tabs
            value={value}
            onChange={this.handleChange}
            scrollable
            scrollButtons="on"
            indicatorColor="primary"
            textColor="primary"
          >
            <Tab label="Search" icon={<PhoneIcon />} />
            <Tab label="Favorites" icon={<FavoriteIcon />} />
            {/* <Tab label="Item Three" icon={<PersonPinIcon />} />
            <Tab label="Item Four" icon={<HelpIcon />} />
            <Tab label="Item Five" icon={<ShoppingBasket />} />
            <Tab label="Item Six" icon={<ThumbDown />} />
            <Tab label="Item Seven" icon={<ThumbUp />} /> */}
          </Tabs>
        </AppBar>

react code

 handleClickOpen = currentTarget => {
    console.log("handleClickOpen--->");
    console.log("event.currentTarget--->", currentTarget.relatedTarget);
    // console.log("event.relatedTarget--->", relatedTarget);

    // this.setState({ open: true });
  };

TabContainer.propTypes = {
  children: PropTypes.node.isRequired
};

function TabsFavourites(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabsFavourites.propTypes = {
  children: PropTypes.node.isRequired
};

Answer 1

示例：

您具有以下结构：

<Parent>
  <Tabs />
  <Child />
</Parent>

然后，您的父项组件应如下所示。您将新添加的收藏夹作为道具向下传递到选项卡。您添加了新的收藏夹，以更新父状态。

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      favorites: []
    }
    this.handleClick = this.handleClick.bind(this);
  }

  // props
  handleClick(prop) {
    this.setState({ favorites: this.state.concat(prop) })
  }

  render() {
    const { favorites } = this.state;
    return (
      <div>
        <Tabs favorites={ favorites } />
        <Child onClick={ this.handleClick }/>
      </div>
    )
  }
}

Reactjs：将道具从卡片组件传递到标签组件

1 个答案: