使用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中的一些问题，或者因为react键没有正确更新，但它可以工作

下面是应用了解决方案的工作笔：https://codepen.io/evgen/pen/KqmKjK

Answer 2

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

如果您将var key = 'item-' + index;更改为var key = 'item-' + value;，则将设置为go。

Answer 3

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

我的建议是也不要将其设置为值，因为值是整个形式，也可能会发生变化。将key设置为唯一ID (可能是redux-form中的表单名称，如果您正在使用该名称)。

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