Nehmen wir an, ich habe eine Ansichtskomponente mit einem bedingten Rendering:

render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

MyInput sieht ungefähr so aus:

class MyInput extends React.Component {

    ...

    render(){
        return (
            <div>
                <input name={this.props.name} 
                    ref="input" 
                    type="text" 
                    value={this.props.value || null}
                    onBlur={this.handleBlur.bind(this)}
                    onChange={this.handleTyping.bind(this)} />
            </div>
        );
    }
}

Sagen wiremployed ist wahr. Immer wenn ich auf false umschalte und die andere Ansicht rendert, wird nurunemployment-duration wird neu initialisiert. Ebenfallsunemployment-reason wird mit dem Wert von @ vorbelejob-title (wenn ein Wert angegeben wurde, bevor sich die Bedingung geändert hat).

Wenn ich das Markup in der zweiten Rendering-Routine in etwa so ändere:

render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <span>Diff me!</span>
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

Es scheint, als ob alles gut funktioniert. Sieht so aus, als würde React "Berufsbezeichnung" und "Grund für Arbeitslosigkeit" einfach nicht unterscheiden.

Bitte sag mir, was ich falsch mache ...