Question

如何通过onAddClick道具将其他数据传递给新添加的数组元素组件？ onAddClick ：（事件）=> void：一个将新项目添加到数组的函数。

我只需要复制项目并使用单击的数据创建一个新项目。

这是我删除项目的方式

const handleRemove = () => {
if (typeof formContext.removeObject === 'function') {
  formContext.removeObject(index, props.onDropIndexClick(index), title);
} else {
  props.onDropIndexClick(index)();
}

};

这就是我渲染它们的方式

export function CardArray(props) {
  const classes = useStyles();
  const { title, items, canAdd, onAddClick, formContext } = props;

  return (
    <Card className={classes.wrapper}>
      <CollapseTitle title={title}>
        {items.map(element => arrayItem(element, formContext, classes, 
         title))}           
      </CollapseTitle>
      {canAdd && (
        <CardActions>
          <Fab
            className={classes.addObjButton}
            color="primary"
            size="small"
            onClick={onAddClick}
          >
            <AddIcon />
          </Fab>
        </CardActions>
      )}
    </Card>
   ); 
 }

Answer 1

修改状态时可以使用updater函数：

const onAddClick = () => {
 this.setState(prevState => ({
  items: [...prevState.items, newItem]
 }))
}

您可以与我们联系concat，因为它会返回一个新数组：

const onAddClick = () => {
  this.setState({ 
   items: this.state.items.concat([newItem])
  })
}

或者如果您熟悉ES6（我想您也很熟悉），则可以使用Spread Operator：

const onAddClick = () => {
  this.setState({
   arrayvar: [...this.state.arrayvar, newelement]
  })
}

如何将数据传递到新添加的数组元素组件

1 个答案: