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标签消失

1 个答案: