时间戳

首页 > 解决方案 > 如何将数据传递给新添加的数组元素组件

reactjs - 如何将数据传递给新添加的数组元素组件

问题描述

如何通过 onAddClick 道具将附加数据传递给新添加的数组元素组件？onAddClick: (event) => 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>
   ); 
 }

标签： reactjsreact-jsonschema-forms

解决方案

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]
  })
}

推荐阅读