使用formData进行React-sortable-hoc

Question

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

对不起，我不知道如何将'react-sortable-hoc'库导入到跟随JSFiddle。

链接：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

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

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

拥有这些信息可以为我节省两天的挫败感。