Reagieren bekommen Wert tief im inneren DOM

Bezug auf Ihre zweite Frage - es ist ein schlechter Ansatz um eine Komponente hinzuzufügen, die für jedes logische element.
In deinem Beispiel - alle Komponenten (außer dem ersten) hat keine Logik, nur 'render'. dieses design fügt viele nutzlose Zeilen code, und "dies.props" Wiederholungen.
In deinem Beispiel würde ich einfach alles hinzuzufügen, um das Rendern der ersten Komponente.

Nun, lassen Sie sagen, Sie haben zwei Komponenten, und erreichen möchten, dass das Kind von den Eltern:

var SignUpForm = React.createClass({

  handleSubmit: function(e) {
    e.preventDefault();

    //now - reach your inner comp with refs
    console.log(this.refs.inner.refs.username.getDOMNode().value.trim());      
  },

  render: function() {
    return (
       //and pass the submit function as a callback
       <InnerForm ref="inner" submit={this.props.handleSubmit}/>           
    );
  }
});

var InnerForm = React.createClass({

  render: function() {
    return (
       <form>  
           <input type="text" ref="username"/>
           <input type="submit" onClick={this.props.submit} >
       </form>           
    );
  }
});

In deinem Beispiel gab es zu viele Komponenten innerhalb von Komponenten zu tun, was ich Tat.
Noch immer gibt es Fälle, wenn Sie lange brauchen linage von Kind-Komponenten. Die Nutzung dieser.refs.ein.refs.b.refs.c, etc - könnte ziemlich hässlich, und verhindert auch, dass re-usability.

in diesen Fällen versuchen, mit jedem der MVC-Architektur (ich verwende reflux und lieben es)

In der Abwesenheit von einem Rahmen wie Eckige oder Flux, Schießen Sie Daten zwischen Ihren Komponenten mit Rückrufen.

Die hier verwendete Technik ist im detail erklärt Reagieren auf die website. Eine andere Lösung, jedoch ist die Verwendung einer Formular-Bibliothek. Ich nahm einen ähnlichen Weg und versucht, den Aufbau form-Komponenten von Grund auf neu-es funktioniert, aber es ist ein Weg, andere wurden bereits geräumt. Check-out newforms und reagieren-Formen.

Beachten Sie, dass der code, den ich geteilt ist ungetestet, aber es sollte sehr nah zu arbeiten.

var SignUpForm = React.createClass({

    handleSubmit: function(e) {
        e.preventDefault();

        console.log(this.iitu_id + ' and ' + this.password + ' should work.');

        var error = UserValidator.valid({iitu_id: iitu_id, password: password});
        if (error) {
            this.setState({"errors": error });
            //console.log(error);
        } else {
            //console.log(error);
        }

    },

    getInitialState: function() {
        return {
            'errors': {
                iitu_id: null, 
                password: null
            }
        };
    },

    updateForm: function(field, value) {
        /*  Or do something like this using underscore.js:

                var form = _.clone(this.form);
                form[field] = value;
                this.setState({ form: form });

            This approach let's you grab the form object on
            submit instead of hunting for the form values
            in SignUpForm's state.
        */

        this.setState({ field: value });
    },

    render: function() {
        return (
            /*jshint ignore:start */
            <form className="form-horizontal" onSubmit={this.handleSubmit} >
                <FormGroup update={this.updateForm} label="iitu id" error_msg={this.state.errors.iitu_id} fieldName="iitu_id" fieldType="text" />
                <FormGroup label="password" error_msg={this.state.errors.password} fieldName="password" fieldType="password" />
                <ButtonGroup text="Войти"/>
            </form>
            /*jshint ignore:end */
        );
    }
});

var FormGroup = React.createClass({

    handleChange: function(event) {
        this.props.update(this.props.fieldName, event.target.value);
    },

    render: function() {
        var formGroupCss = 'form-group';
        if (this.props.error_msg){
            formGroupCss = 'form-group has-error';
        }

        return (
            /*jshint ignore:start */
            <div className={formGroupCss}>
                <Label fieldName={this.props.fieldName}>{this.props.label}</Label>
                <InputField handleChange={this.handleChange} type={this.props.fieldType}>{this.props.label}</InputField>
                <label className="control-label" for="inputError1">{this.props.error_msg}</label>
            </div>
            /*jshint ignore:end */
        );
    }
});


var ButtonGroup = React.createClass({
    render: function () {
        return (
            /*jshint ignore:start */
            <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                    <button className="btn btn-default">{this.props.text}</button>
                </div>
            </div>
            /*jshint ignore:end */
        );
    }
});

var InputField = React.createClass({
    render: function() {

        return (
            /*jshint ignore:start */
            <div className="col-sm-5">
                <input onChange={this.props.handleChange} className="form-control" type={this.props.fieldType} placeholder={this.props.children}/>
            </div>
            /*jshint ignore:end */
        );
    }
});

exports.SignUpForm = SignUpForm;

Speziell, beachten Sie bitte die callback-Funktionen übergeben wird, von den Eltern auf das Kind.

1. SignUpForm gibt updateForm zu FormGroup
2. FormGroup gibt handleChange zu InputField

Dann die Daten zurück an die Spitze, Sie einfach den Prozess umkehren.

1. Wenn <input/> änderungen, es läuft handleChange
2. Wenn handleChange läuft, übergibt er die FormGroup ist fieldName und value zu SignUpForm
3. SignUpForm seinen Status aktualisiert und mit dem neuen Wert im Feld