对formData的反应可分类的特别

在我的情况下，我想开发一个可排序的表单列表。不幸的是，表单状态在排序后没有更新。请帮忙。我坚持了一个星期。对formData的反应可分类的特别

我很抱歉，我不知道如何将'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 { 
 
\t 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>

来源

2017-06-20 Ken Hui

有在你的代码少错别字。固定，并改变这个

{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} />) 
    })}

一切正常。不幸的是，我不知道为什么，这真的帮助 - 由于在一些问题反应可排序-hoc或因为反应项不正确更新，但它的工作原理

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

来源

2017-06-20 12:18:01

感谢Evgeny Sorokin。请让我试试看。 –

我不知道为什么。我需要在ElementItem上添加ComponentWillReceiveProps（）和componentWillUpdate（）以更新父状态和子道具以实现此目的。但是很麻烦，还有其他解决方案吗？ –

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

如果您将var key = 'item-' + index;更改为var key = 'item-' + value; 即表示您已设置。

来源

2017-07-02 16:54:44 stefanos

对formData的反应可分类的特别

回答

相关问题