Question

我想在选中复选框时向state.contacts数组添加项，并在取消选中复选框时删除该项。我怎么做才能做出反应？

目前使用发布/订阅模式和回调：

我的组件渲染使用：

handler: function(e) {

    channel.publish({
        channel: "contact",
        topic: "selectedContact",
        data: {
            id: e.target.attributes['data-ref'].value
        }
    });
  },

  return (
        <div className="selector">
            <input type="checkbox"
                checked={isSelected} data-ref={id}
                onClick={this.handler} />
        </div>
    );

我的点击处理程序：

componentDidMount: function() {
    var page = this;

    this.loadContacts();

    // setup subscribe
    contactChannel.subscribe("selectedContact", function (data, envelope) {
        page.handleSelectedContact(data.id, page);
    });
},

handleSelectedContact: function(id, page) {

    var page = this;

    var callback = function () {

        var arrayPush = [];
        var arrayPush = page.state.selected.slice();
        var index = page.state.selected.indexOf(id);

        if (index === -1) {

            // if no id in array, push it  
            arrayPush.push(id);
            page.setState({selected: arrayPush})

            var idAsNumber = parseInt(id);

            // show selected value in checkbox
            var newContacts = page.state.contacts.map(function (contact) {
                if (contact.id === idAsNumber) {
                    contact.isSelected = true;
                }
                return contact;
            });

        } else {
            // remove id from array
            page.state.selected.splice(index, 1);
            page.setState({selected: arrayPush})

        }
        // set new contacts state
        page.setState({contacts: newContacts});

        console.log(page.state.selectedContacts);

        basketChannel.publish({
            channel: "basket",
            topic: "addContactToBasket",
            data: {
                id: id,
                newTotal: arrayPush.length
            }
        });
    }

    BasketService.addPerson(id, callback);


},

Answer 1

要在单击React中的复选框时向数组添加元素，只需将事件处理程序属性添加到JSX标记，将ref属性添加到要获取值的元素，然后将项目推送到国家：

getInitialState: function() {
    return {isSelected: false, items: []};
},
handler: function(e) {
    var isSelected = !this.state.isSelected,
        items = this.state.items.push(e.target.value);

    this.setState({isSelected: isSelected, items: items});
},
render: function() {
    return (
       <div className="selector">
         <input type="checkbox"
           checked={this.state.isSelected}
           onChange={this.handler} />
       </div>);

使用复选框从数组添加/删除项目

1 个答案: