Bootstrap-Checkbox nicht umschalten

Question

Ich verwende ein Bootstrap-Kontrollkästchen und ein reguläres. Warum kann der Bootstrap Checkbox nicht umschalten, während das reguläre Feld input umgeschaltet werden kann?

onChange = (evt) => { 
    const target = evt.target; 
    const name = target.name; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    this.setState({ 
     [name]: value 
    }); 

    this.props.onChange({ name, value }); 
}; 
        <input 
         name="unlimited" 
         type="checkbox" 
         checked={this.state.unlimited} 
         onChange={this.onChange} /> 
        <Checkbox 
         name="unlimited" 
         onChange={this.onChange} 
         checked={this.state.unlimited} 
        > 
         UNLIMITED {this.state.unlimited.toString()} 
        </Checkbox> 

EDIT ich ein paar Fehler gemacht, als ich ursprünglich Code geschrieben. Oben ist der korrigierte Code.

EDIT Ich bin überzeugt, dass dies ein Fehler ist, weil Bootstrap JS-Bibliothek ist, see here stören.

Answer 1

Sie übergeben checked Prop von Checkbox einen Wert von der übergeordneten über props. Bist du sicher, dass du den neuen Status im Elternteil aktualisierst und eine neue Requisite erneut übergibst? Hier

ist ein Beispiel Ihr Code verwendet:

const { Checkbox } = ReactBootstrap; 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     unlimited: false 
 
    }; 
 
    } 
 

 
onChange = (evt) => { 
 
    const target = evt.target; 
 
    const name = target.name; 
 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
 
    this.setState({ 
 
     [name]: value 
 
    }); 
 
}; 
 

 
    render() { 
 
    const { unlimited } = this.state; 
 
    return (
 
     <div> 
 
     <input 
 
      name="unlimited" 
 
      type="checkbox" 
 
      checked={this.state.unlimited} 
 
      onChange={this.onChange} /> 
 
     <Checkbox 
 
      name="unlimited" 
 
      onChange={this.onChange} 
 
      checked={this.state.unlimited} 
 
     > 
 
      UNLIMITED {this.state.unlimited.toString()} 
 
     </Checkbox> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.3/react-bootstrap.min.js"></script> 
 
<div id="root"></div>

bearbeiten

Jede Erfahrung in der bootstrap.js überschrieben? es ist auf der globalen Template-Seite unserer App (PHP Smarty)

Ich bin kein PHP-Experte, aber ich denke, Sie bedingt den Script-Tag von bootstrap.js machen kann, also, wenn Sie auf die Seite umgeleitet, die verwenden Ihre react Anwendung rendern nicht nur das <script> Tag.

Answer 2

Sie einen kontrollierten Eingang haben - https://reactjs.org/docs/forms.html#controlled-components

in diesem Fall sehen, wird die aufgegebenen gebunden an Ihre Stütze der Mutterkomponente fields={unlimited}

sagen Sie Ihre Eltern über onChange={}, dass es einen neuen Namen und Wert - es wird sein, um es zu setState() in eine Weise, die einen neuen fields.unlimited

Eg geht, sie können Stateful Eltern sein:

class Foo extends Component { 
    state = { 
    unlimited: false 
    } 

    onChange = (name, value) => this.setState({[name]: value}) 

    render(){ 
    return <MyOtherComponent fields={this.state} onChange={this.onChange} /> 
    } 
} 

Wenn Ihre Komponente selbst stateful ist (mit Ihrem handleChange), können Sie in uncontrolled konvertieren (https://reactjs.org/docs/uncontrolled-components.html) oder an Ihren lokalen Status binden, wenn Sie es von Requisiten auf mount synchronisieren und Requisiten erhalten.