Как установить флажок по умолчанию checkbox ReactJS?

у меня возникли проблемы с обновлением состояния флажка после его назначения со значением по умолчанию checked="checked" в React.

var rCheck = React.createElement('input',
                                 {type: 'checkbox', checked:'checked', value: true},
                                 'Check here');

после назначения checked="checked", Я не могу взаимодействовать с состоянием флажка, нажав, чтобы снять флажок / проверить.

93
checkbox reactjs

8 ответов

чтобы взаимодействовать с полем, вам нужно обновить состояние для флажка после его изменения. И по умолчанию вы можете использовать defaultChecked.

пример:

<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />
120

если флажок создан только с React.createElement затем Свойства есть.

React.createElement('input',{type: 'checkbox', defaultChecked: false});

кредит @nash_ag

40

есть несколько способов сделать это, вот один из них:

написано в ES6:

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isChecked: true,
    };
  }
  toggleChange = () => {
    this.setState({
      isChecked: !this.state.isChecked,
    });
  }
  render() {
    return (
      <label>
        <input type="checkbox"
          checked={this.state.isChecked}
          onChange={this.toggleChange}
        />
        Check Me!
       </label>
    );
  }
}

ReactDOM.render(<Checkbox />, document.getElementById('checkbox'));

вот живая демонстрация на JSBin.

или с простым старым JavaScript:

var Checkbox = React.createClass({
  getInitialState: function() {
    return {
      isChecked: true
    };
  },
  toggleChange: function() {
    this.setState({
      isChecked: !this.state.isChecked // flip boolean value
    }, function() {
      console.log(this.state);
    }.bind(this));
  },
  render: function() {
    return (
      <label>
        <input
          type="checkbox"
          checked={this.state.isChecked}
          onChange={this.toggleChange} />
        Check Me!
      </label>
    );
  }
});

React.render(<Checkbox />, document.getElementById('checkbox'));

опять же, с демо на JSBin.

33

в дополнение к правильному ответу вы можете просто сделать: P

<input name="remember" type="checkbox" defaultChecked/>
8

Он работает

<input type="checkbox" value={props.key} defaultChecked={props.checked} ref={props.key} onChange={this.checkboxHandler} />

и функция init it

{this.viewCheckbox({ key: 'yourKey', text: 'yourText', checked: this.state.yourKey })}
4

вот код, который я сделал некоторое время назад, это может быть полезно. вы должны играть с этой линией => this.state = { checked: false, checked2: true};

class Componente extends React.Component {
  constructor(props) {
    super(props);

    this.state = { checked: false, checked2: true};
    this.handleChange = this.handleChange.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);

  }  

  handleChange() {
    this.setState({
        checked: !this.state.checked      
    })
  }

  handleChange2() {
    this.setState({
        checked2: !this.state.checked2      
    })
  }

  render() {
    const togglecheck1 = this.state.checked ? 'hidden-check1' : '';
    const togglecheck2 = this.state.checked2 ? 'hidden-check2' : '';

    return <div>
        <div>
        <label>Check 1</label>
        <input type="checkbox" id="chk1"className="chk11" checked={ this.state.checked } onChange={ this.handleChange } />
        <label>Check 2</label>
        <input type="checkbox" id="chk2" className="chk22" checked={ this.state.checked2 } onChange={ this.handleChange2 } />
      </div>

      <div className={ togglecheck1 }>show hide div with check 1</div>
      <div className={ togglecheck2 }>show hide div with check 2</div>

    </div>;
  }
}

ReactDOM.render(
  <Componente />,
  document.getElementById('container')
);

в CSS

.hidden-check1 {
  display: none;  
  }

.hidden-check2 {
  visibility: hidden;
}

HTML-код

  <div id="container">
      <!-- This element's contents will be replaced with your component. -->
  </div>

вот codepen =>http://codepen.io/parlop/pen/EKmaWM

0
 <div className="form-group">
          <div className="checkbox">
            <label><input type="checkbox" value="" onChange={this.handleInputChange.bind(this)}  />Flagged</label>
            <br />
            <label><input type="checkbox" value=""  />Un Flagged</label>
          </div>
        </div

handleInputChange(событие){

console.log("event",event.target.checked)   }

вышеупомянутый дескриптор дает вам значение true или false при checked или unChecked

-2

Я устанавливаю состояние как любой тип []. и в конструкторе установите состояние в null.

onServiceChange = (e) => {
    const {value} = e.target;
    const index = this.state.services.indexOf(value);
    const services = this.state.services.filter(item => item !== value);
    this.setState(prevState => ({
        services: index === -1 ? prevState.services.push(value) && prevState.services : this.state.services.filter(item => item !== value)
    }))
}

во входном элементе

этого.onServiceChange (e)} / > этот.onServiceChange (e)} / > этот.onServiceChange (e)} / > этот.onServiceChange (e)}/>

Я понял это через некоторое время. Думал, это может помочь вам всем:)

-2