Reagieren: wie Eltern über Änderungen benachrichtigen

Question

Ich versuche, Bootstrap in Komponenten mit integrierter Formularüberprüfung einzubetten.

kurz: Lassen Sie uns sagen, ich habe

<Form> 
    <FieldGroup> 
    <Field rules={'required'}/> 
    </FieldGroup> 
</Form> 

Sobald Field pases Validierung, wie kann ich FieldGroup (Elternknoten) benachrichtigen eine Klasse hinzufügen? Ich kann also richtig die Klassennamen ändern

habe ich eine vereinfachte Version codepen here

I je nach Validierungsstatus haben möchte, dann den Zustand der Feldgruppen- ändern. (Fügen Sie has-warninghas-danger usw. hinzu) und fügen Sie schließlich der Form-Komponente Klasse hinzu.

Answer 1

Sie müssen eine callback an die untergeordnete Komponente übergeben. Ich habe nur deinen Codepen gegabelt und ein paar Schnipsel wie unten hinzugefügt.

http://codepen.io/andretw/pen/xRENee

ist hier das wichtigste Konzept, eine Rückruffunktion "Eltern"Komponente inStellen und an die"Kind"Komponente

passieren

ie Die Kindkomponente benötigt eine zusätzliche Stütze den Rückruf zu erhalten:

<Form> 
    <FieldGroup> 
    <Field rules={'required'} cb={yourCallbackFunc}/> 
    </FieldGroup> 
</Form> 

In <FieldGroup /> (Eltern):

class FieldGroup extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     color: 'blue' 
    } 
    } 

    cb (msg) { 
    console.log('doing things here', msg) 
    } 

    render() { 
    const childrenWithProps = React.Children.map(this.props.children, 
    child => React.cloneElement(child, { 
     cb: this.cb 
    }) 
    ) 
    return (
     <div class='fields-group'> 
     <label> field </label> 
     { childrenWithProps } 
     </div> 
    ); 
    } 
}; 

In <Field /> (Kind):

class Field extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     empty: true 
    } 
    this.validate = this.validate.bind(this); 
    } 

    validate(e){ 
    let val = e.target.value; 
    console.log(!val); 
    this.setState({empty: !val}); 
    //here to notify parent to add a color style! 

    // do call back here or you may no need to return. 
    this.props.cb(val) 

    return !val; 
    } 

    render() { 
    return (
     <div> 
     <input type='text' onBlur ={(event) => this.validate(event)}/> 
     {this.state.empty && 'empty'} 
     </div> 
    ); 
    } 
}; 

Und du die Dinge tun, können Sie in der Callback-Funktion wollen . (Sie können auch einen Rückruf von <Form /> an den Enkel übergeben und es funktioniert, aber Sie müssen das Design von ihm ist gut oder nicht zu überdenken.)