Чтобы сделать список с помощью Reaction-Sorttable-HOC - PullRequest
Новая
       30

Чтобы сделать список с помощью Reaction-Sorttable-HOC

0 голосов
/ 26 ноября 2018

Я использую сортируемое перетаскивание, которое отлично работает.Проблема в том, что я хотел бы, чтобы пользователи могли удалять элементы.Компонент SortableItem недоступен, так как он поставляется с кодом, поэтому я не могу передать обработчик события, который принимает индекс в качестве аргумента.Вот что у меня есть: 

const SortableItem = SortableElement(
 ({value}) =>
 <ul>{value}</ul>
);

const SortableList = SortableContainer(({items}) => {
 return (
<ul>
  {items.map((value, index) => (
    <SortableItem key={`item-${index}`} index={index} value={value} />
  ))}
</ul>
);
});

export class BlocksContainer extends React.Component {
  constructor(props){
   super(props);
   this.state = {
  items: [],
 };
}
onSortEnd = ({oldIndex, newIndex}) => {
  this.setState({
    items: arrayMove(this.state.items, oldIndex, newIndex),
  });
};

addBlock = (block) =>{
  let arr = [...this.state.items, block];
  this.setState({items: arr})
}

removeBlock = (index) => {
let remove = [...this.state.items];
remove.filter(block => block === index);
this.setState({items:remove})
}

render() {
  return (<div><div onChange={console.log(this.state)} className="sortableContainer"><SortableList items={this.state.items} onSortEnd={this.onSortEnd} /></div>
  <h2>Blocks</h2>
  <button onClick={() => this.addBlock(<BannerImage remove={this.removeBlock} />)}>Banner Image</button>
  <button onClick={() => this.addBlock(<ShortTextCentred remove={this.removeBlock}/>)}>Short Text Centred</button>
  <h2>Layouts</h2>
  <hello />
         </div>
)
}
}

1 Ответ

0 голосов
/ 26 ноября 2018

Поскольку у вас нет контроля над событиями компонента SortableItem, вы можете обернуть этот компонент в компонент, над которым у вас есть контроль.

Например, если я хотел добавить обработчик щелчка вSortableItem, я бы добавил его вместо обёртки div: 

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <div onClick={this.someEventHandler}>
          <SortableItem key={`item-${index}`} index={index} value={value} />
        </div>
      ))}
    </ul>
  );
});
...