在ReactJS中将新值推入数组之前，如何验证状态数据？

Question

Friends, I'm writing a drag and drop items example in ReactJs. 朋友，我在ReactJs中编写一个拖放项目示例。 I'm droping the items in a new div taking them in a new array. 我将这些项目放在新的div中，将它们放入新的数组中。 Now my new array(drop array) should validate not to drop the same item twise in my new div. 现在，我的新数组（放置数组）应该验证不要在我的新div中将相同的项twise放置。 I'm not getting how to validate the new dragged item with existing drop array. 我不知道如何使用现有的放置数组来验证新拖动的项目。

Here is my code: 这是我的代码：

<!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>

Answer 1

        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;
                if(arr.indexOf(new_data) > -1) {
                   arr = arr.slice();
                   arr.push(this.props.data[new_data]);  
                   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>
                )
            }
        });

在ReactJS中将新值推入数组之前，如何验证状态数据？

问题描述

1 个解决方案

解决方案1
0 2016-07-04 11:08:56

在ReactJS中将新值推入数组之前，如何验证状态数据？

问题描述

1 个解决方案

解决方案1 0 2016-07-04 11:08:56

解决方案1
0 2016-07-04 11:08:56