0
友人、私はReactJsのドラッグアンドドロップ項目の例を書いています。私はそれらを新しい配列に入れて新しいdivに項目をドロップします。今私の新しい配列（ドロップ配列）は、私の新しいdivに同じ項目twiseをドロップしないことを検証する必要があります。既存のドロップ配列で新しいドラッグされたアイテムを検証する方法がわかりません。ここでReactJSの配列に新しい値をプッシュする前に状態データを検証する方法は？
は私のコードです：
<!doctype html>
<html00 lang="en">
<head>
<meta charset="UTF-8">
<title>React JS Example 1</title>
<style>
#div1 {width:350px;height:200px;padding:20px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<div id="container"></div>
<div id="container1"></div>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel">
/*** @jsx React.DOM */
var Employee = React.createClass({
getInitialState: function(){
return {data: [], empName: '',dropData:[]};
},
onClick: function(event){
this.state.data.push({empName: this.state.empName});
this.setState({empName: ''});
},
onNameChange: function(event){
this.setState({empName : event.target.value});
},
drag: function(event) {
event.dataTransfer.setData("div", event.target.id);
},
render: function(){
return(
<div>
<h1> Add New Employees </h1>
Employee Name : <input type="text" value={this.state.empName} onChange={this.onNameChange}/>
<button onClick={this.onClick}>Add</button>
<ul>
{this.state.data.map(function(item, i) {
return (<li data-id={i} id={i} draggable="true" onDragStart={this.drag}>{item.empName}</li>)
}, this)}
{this.state.data.length > 0 ?<NewEmployee data={this.state.data}/> : null}
</ul>
</div>
)
}
});
var NewEmployee = React.createClass({
getInitialState: function(){
return {data: this.props.data,dropData:[]};
},
allowDrop: function(event) {
event.preventDefault();
},
dropItem: function(event) {
event.preventDefault();
var new_data = event.dataTransfer.getData("div"),
arr = this.state.dropData;
arr.push(this.props.data[new_item]);
this.setState({dropData: arr});
},
render: function(){
return(
<div id="div1" onDrop={this.dropItem} onDragOver={this.allowDrop}>
{this.state.dropData.map(function(items, i) {
return (<li>{items.empName}</li>)
}, this)}
</div>
)
}
});
ReactDOM.render(<Employee/>, document.getElementById('container'));
</script>
</body>
</html>
は動作しません:( – user191990