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

How to validate a state data before pushing a new value into array in ReactJS?

本文关键字：数组验证数据状态新值推 ReactJS 更新时间：2023-09-26

朋友们，我正在用ReactJs写一个拖放项目的例子。我把项目放到一个新的div中把它们放到一个新的数组中。现在我的新数组(拖放数组)应该验证，而不是在我的新div中明智地拖放相同的项目。我不知道如何验证新的拖放项目与现有的拖放数组。

下面是我的代码:

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

        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>
                )
            }
        });