React-sortable-hoc 与 formData

Question

就我而言，我想开发一个可排序的表单列表。不幸的是，排序后表单状态不会更新。请帮忙。我坚持了一个星期。

很抱歉，我不知道如何将 'react-sortable-hoc' 库导入 follow JSFiddle。

link: https://github.com/clauderic/react-sortable-hoc

import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

class ElementItem extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: this.props.value
        }

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }

    render() {
        return (
            <input type="text" name="value" value={this.state.value} onChange={this.handleInputChange}/>
        )
    }
}

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

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

export default class SortableComponent extends React.Component {
 constructor(props) {
        super(props);
        this.state = {
            items: Array.apply(null, Array(100)).map((val, index) => 'Item ' + index)
        }
    }
    onSortEnd({oldIndex, newIndex}) {
        this.setState({
            items: arrayMove(this.state.items, oldIndex, newIndex)
        });
    }
    render() {
        return (
            <SortableList items={this.state.items} onSortEnd={this.onSortEnd.bind(this)} helperClass="SortableHelper" />
        )
    }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script src="https://npmcdn.com/react-sortable-hoc/dist/umd/react-sortable-hoc.min.js"></script>

<div id="root">
  <!-- This element's contents will be replaced with your component. -->
</div>

Answer 1

您的代码中几乎没有拼写错误。修复它们并更改后

  {items.map((value, index) => (
  var key = 'item-' + index;
    <SortableItem key={key} index={index} value={value} />
  ))}

对此：

  {items.map((value, index) => {
    var key = 'item-' + value;
    return (<SortableItem key={key} index={index} value={value} />)
  })}

一切正常。不幸的是，我不确定为什么这真的有帮助 - 因为 react-sortable-hoc 中的一些问题或者因为反应键没有正确更新，但它有效

这是应用了溶液的工作笔：https://codepen.io/evgen/pen/KqmKjK

Answer 2

它实际上与您传递给表单的密钥有关。

如果将 var key = 'item-' + index; 更改为 var key = 'item-' + value; 你准备好了。

Answer 3

如果大家遇到这个问题，我的建议也是关键。如前所述，不要将其设置为索引，因为拖放时索引会发生变化。

我的建议是也不要将其设置为 value，因为 value 是整个表单，而且可能会发生变化。将 key 设置为唯一 ID（如果您使用的是 redux-form 中的表单名称）。

有了这些信息，我就可以避免两天的挫败感。

React-sortable-hoc 与 formData

React-sortable-hoc with formData

jquery-ui-sortable

reactjs