对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>
答
有在你的代码少错别字。固定,并改变这个
{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
答
它实际上与你传递给表单的密钥有关。
如果您将var key = 'item-' + index;
更改为var key = 'item-' + value;
即表示您已设置。
感谢Evgeny Sorokin。请让我试试看。 –
我不知道为什么。我需要在ElementItem上添加ComponentWillReceiveProps()和componentWillUpdate()以更新父状态和子道具以实现此目的。但是很麻烦,还有其他解决方案吗? –