Question

我在jsfiddle中创建了一个我的问题的例子，当我点击减号时，似乎总是删除列表中的最后一个元素。

重现的步骤：

按添加3次
在每个
按中间减号按钮

最后一个总是被删除，预期的行为是删除内联减号按钮。

HTML

<!-- index.html -->
<!DOCTYPE html>
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<body>
<div id="content"></div>
<script src="main2.jsx" type="text/babel"/>
</body>

JSX

var ConditionGroup = React.createClass({

    makeId: function () {
        return Math.floor((Math.random() * 10000000000000) + 1);
    },

    getInitialState: function () {
        return {conditionNodes: []};
    },

    removeCondition: function(condition) {
        let res = [];
        console.log(condition);
        console.log(this.state.conditionNodes);
        for (var i = 0; i < this.state.conditionNodes.length; i++) {
            if (this.state.conditionNodes[i].props.id !== condition.props.id) {
                console.log('beep');
                res.push(this.state.conditionNodes[i]);
            }
        }
        console.log(res);

        this.setState({conditionNodes: res});
    },

    handleAddCondition: function (e) {
        e.preventDefault();

        var conditionNodes = this.state.conditionNodes;
        conditionNodes.push(
            (
                <Condition removeCondition={this.removeCondition} id={this.makeId()}/>
            )
        );

        this.setState({conditionNodes: conditionNodes});
    },

    render: function () {
        return (
            <div className="conditionGroup">
                {this.state.conditionNodes}

                <br/>
                <input onClick={this.handleAddCondition} type="button" value="Add"/>
            </div>
        )
    }
});

var Condition = React.createClass({
    conditions: [
        {id: "STATE", name: "State"},
        {id: "PATTERN_MATCH", name: "Pattern Match"},
        {id: "GREATER_THAN", name: "Greater Than"},
        {id: "LESS_THAN", name: "Less Than"},
        {id: "EQUAL_TO", name: "Equal To"},
        {id: "IS_TRUE", name: "Is True"}
    ],

    getInitialState: function () {
        return {selectValue: "STATE"}
    },

    handleRemoveAction: function (e) {
        e.preventDefault();
        this.props.removeCondition(this);
    },

    onChange: function (e) {
        this.setState({selectValue: e.target.value})
    },

    render: function () {
        var conditionOptions = this.conditions.map(function (condition) {
            return (
                <option value={condition.id}>{condition.name}</option>
            )
        });

        return (
            <div class="condition">
                <select onChange={this.onChange} value={this.state.selectValue}>
                    {conditionOptions}
                </select>

                <input onClick={this.handleRemoveAction} value="-" type="button"/>
            </div>
        )
    }
});

ReactDOM.render(
    <ConditionGroup/>,
    document.getElementById('content')
);

https://jsfiddle.net/sd3h7g3v/

如何删除元素？

0 个答案: