React-sortable-hoc 与 formData答案

【问题标题】：React-sortable-hoc with formDataReact-sortable-hoc 与 formData
【发布时间】：2017-06-20 10:00:29
【问题描述】：

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

很抱歉，我不知道如何将“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>

【问题讨论】：

标签： reactjs jquery-ui-sortable

【解决方案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

【讨论】：

我不知道为什么。我需要在 ElementItem 处添加 ComponentWillReceiveProps() 和 componentWillUpdate() 来更新父 state 和子 props 以达到目的。但是很麻烦，有没有其他的解决办法？

【解决方案2】：

这实际上与您传递给表单的键有关。

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

【讨论】：

【解决方案3】：

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

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

拥有这些信息可以让我免去两天的挫败感。

【讨论】：