Question

我想为拖放项目创建删除按钮，当我保存此代码时，编译出错误

类型'IntrinsicAttributes和IntrinsicClassAttributes>和Readonly <{value：string;类型不存在属性'onRemove' }＆SortableElementProps>＆Readonly <...>'。

从'react'导入*作为React；从'react-dom'导入*作为ReactDOM; 从'react-sortable-hoc'导入{arrayMove，SortableContainer，SortableElement};

const SortableItem = SortableElement(({value}: {value: string}, onRemove)  =>
  <div className="dragItems" style={{background: 'gray'}}>{value}
    <button className="Button" onClick={() => onRemove(any)}>Remove {any}</button>
  </div>
);

const SortableList = SortableContainer(({dragItems}: {dragItems: string[]}, onRemove) => {
  return (
    <div className="dragAndDrop">
      {dragItems.map((value, index) => (
        <SortableItem key={'item-${index}'} index={index} value={value} onRemove={onRemove} />
      ))}
    </div>  
  );
});

class SortableComponent extends React.Component<{}, {items: string[]}> {
  constructor(props: {}) {
    super(props);
    this.state = {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']
    }
  }
  public render() {
    return  <SortableList 
          dragItems={this.state.dragItems} 
          onSortEnd={this.onSortEnd}
          lockAxis="xy"
          axis="xy"
          onRemove={(index: any) => this.remove(index)}
            />;
  }
  private onSortEnd = ({oldIndex, newIndex}: {oldIndex: number, newIndex: number}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };

  remove(index: any) {
    const items = this.state.items;
    items.splice(any, 1);

    this.setState({items : items})
}
}

ReactDOM.render(<SortableComponent/>, document.getElementById('root'));

Answer 1

请关闭此任务，问题已在另一个任务中解决，我在下面附加了链接。

Delete an element by key from Array

类型上不存在属性“ onRemove”

1 个答案: