Reagieren: Wie Sie hören, Kind Komponente Ereignisse

Ich habe eine Komponente, sagen wir, es enthält ein Formular. Die form mit untergeordneten Komponenten, die im wesentlichen UI-widgets für die Ausgabe von text ein, und wählen Sie Menüs.

Wählen Sie die Menü-Komponenten sind ein wenig Phantasie und einige Staatliche Pflege mit dem onChange-Ereignis.

Meine Frage ist, wie mache ich den Haken in das onChange-Ereignis für ein select-Menü aus der übergeordneten (form) - Komponente? Ich kann mich nicht übergeben, onChange durch Requisiten, wie ich bereits onChange angegeben innerhalb der Komponente auswählen, und ich will nicht, um es zu überschreiben.

Beispiel:

var Form = React.createClass({

    handleSelectChange: function(){
        //Do something when <Select /> changes
    },

    render: function () {    

        var selectMenuOptions = [
            {label: 'Choose...', value: ''},
            {label: 'First option', value: 'one'},
            {label: 'Second option', value: 'two'}
        ];
        return (
            <form>
                <Select name="selectMenu" id="selectMenu" options={selectMenuOptions} />
            </form>
          );
        }
});

var Select = React.createClass({

    getDefaultProps: function() {
        return {
          options: [],
          className: "select"
        };
      },

    getInitialState: function () {
        return {
            buttonText: 'Loading...',
            defaultValue: null 
        };
    },

    handleChange: function (e) {
        //Update buttonText state
    },

    render: function () {

        return (
            <div className={this.props.className}>
                <div className="select__button">{this.state.buttonText}</div>
                <select className="select__selector" 
                        ref="select" 
                        onChange={this.handleChange}>
                        {this.props.options.map(function(option, i){
                            return (<Option option={option} key={i} />);
                        })}
                </select>
            </div>
        );
    }
});
  • "Ich habe eine Komponente, sagen wir, es enthält ein Formular." Poste bitte den code für die eigentlichen Komponenten.
  • Code-Beispiel Hinzugefügt.
InformationsquelleAutor Simon | 2015-03-05
Schreibe einen Kommentar