反应标签在检查全部时消失

Question

我有这个 React 组件，它在检查所有检查所有可选择的复选框时工作正常，但我的所有标签都被踢掉了

class Filter extends React.Component {

  constructor(props) {
    super(props);
    this.changeSelection = this.changeSelection.bind(this);
    this.changeAllChecks = this.changeAllChecks.bind(this);

    this.state = {
      data: [{
        id: 1,
        label: 'Pension',
        selected: false
      }, {
        id: 2,
        label: 'Guest House',
        selected: false
      }, {
        id: 3,
        label: 'Hotels',
        selected: false
      }, {
        id: 4,
        label: 'Apartments',
        selected: false
      }]
    };
  }

  render() {

    var checks = this.state.data.map(function(d) {
      return ( < div className = "smart-form" >
        < label className = "checkbox" >
        < input type = "checkbox"
        checked = {
          d.selected
        }
        onChange = {
          this.changeSelection.bind(this, d.id)
        }
        /> < i > < /i > {
          d.label
        } < /label > < /div>
      );
    }.bind(this));
    return ( < form >
      < div className = "jarviswidget "
      id = "wid-id-0" >
      < header >
      < h2 > Filter < /h2> < /header > < div >
      < div className = "jarviswidget-editbox" > < /div> < div className = "widget-body smart-form" >

      < p >
      < header >
      < span > Property Type < /span> < /header > < /p> < label className = "checkbox" > < input type = "checkbox"
      ref = "globalSelector"
      onChange = {
        this.changeAllChecks
      }
      /> < i > < /i > Alle < /label > {
      checks
    } < /div> < /div > < /div> < /form >
  );

}

changeSelection(id) {
  var state = this.state.data.map(function(d) {
    return {
      id: d.id,
      selected: (d.id === id ? !d.selected : d.selected)
    };
  });

  this.setState({
    data: state
  });

}
changeAllChecks() {
  var value = this.refs.globalSelector.getDOMNode().checked;
  var state = this.state.data.map(function(d) {
    return {
      id: d.id,
      selected: value
    };
  });

  this.setState({
    data: state
  });
}
}

React.render( < Filter / > , document.getElementById('content'))

这是我的问题codepen

Answer 1

您在设置状态时缺少label：

changeAllChecks() {
  var value = this.refs.globalSelector.getDOMNode().checked;
  var state = this.state.data.map(function(d) {
    return {
      id: d.id,
      selected: value,
      label: d.label
    };
  });

  this.setState({
    data: state
  });
}

这里是工作代码笔：http://codepen.io/anon/pen/pJxZeQ

反应标签在检查全部时消失

React labels disappears on check all

checkbox

rendering

reactjs