Wie setze ich das Check-in-Kästchen REACT ein js

Question

Ich habe Probleme, den Checkbox-Status zu aktualisieren, nachdem ihm der Standardwert checked = "checked" in React zugewiesen wurde.

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

nach checked="checked" zuweisen, kann ich das Kontrollkästchen Zustand, indem Sie deaktivieren/Check nicht in Wechselwirkung treten.

Answer 1

Wenn das Kontrollkästchen nur mit React.createElement erstellt wird, wird die Eigenschaft defaultChecked verwendet. vor

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

Kredit

Answer 2

Um mit der Box zu interagieren, müssen Sie den Status für das Kontrollkästchen aktualisieren, sobald Sie es ändern. Und um eine Standardeinstellung zu haben, können Sie defaultChecked verwenden.

Ein Beispiel:

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

Answer 3

Es gibt ein paar Möglichkeiten, dies zu tun, ist hier ein:

in ES6 Geschrieben:

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')); 

Hier ist eine Live-Demo auf JSBin.

Oder mit plain old 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')); 

Wieder mit einer Live-Demo auf JSBin.

Answer 4

Hier ist ein Code, den ich einige Zeit tat @nash_ag, könnte es nützlich sein. musst du mit dieser Zeile spielen => das.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> 

hier ist der codepen =>http://codepen.io/parlop/pen/EKmaWM

Answer 5

neben der richtigen Antwort können Sie einfach tun: P

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

Answer 6

It`s Arbeits

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

und Funktion init es

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

Answer 7

<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 (event) {

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

Der obige Handle gibt Ihnen den Wert wahr oder falsch, wenn er markiert oder nicht überprüft wird.

Answer 8

Ich setze den Status als beliebigen [] -Typ. und im Konstruktor den Status auf null setzen.

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) 
    })) 
} 

In dem Eingangselement

this.onServiceChange (e)} /> this.onServiceChange (e)} /> this.onServiceChange (e)} /> this.onServiceChange (e)} />

Ich habe es nach einiger Zeit herausgefunden. Dachte, es könnte Ihnen helfen :)