Einfachste hochwertige Komponenten und Material-Ui

Question

Wenn ich TextField direkt von meiner Komponente verwenden, funktioniert es einwandfrei (Fall 1), aber wenn ich es innerhalb der Funktion (Fall 2) von Requisiten wickeln es verliert den Fokus nach einem jede Änderung.

import TextField from 'material-ui/TextField'; 

var Comp = React.createClass({ 
    getInitialState: function() { 
     return {description: ""}; 
    }, 
    descriptionChanged: function (e) { 
     this.setState({description: e.target.value}); 
    }, 
    render: function() { 
     var self = this; 
     var T2 = function (props) { 
      return <TextField hintText="Desc2" 
           value={self.state.description} 
           onChange={self.descriptionChanged}/>; 
     }; 
     return <div> 
      1 <TextField hintText="Desc1" 
         value={self.state.description} 
         onChange={self.descriptionChanged} 
      /> 
      2 <T2/> 
     </div> 

    } 
}); 

jsfiddle

Warum es passiert und wie kann ich es beheben?

Answer 1

Dies ist, weil Sie eine neue Funktion (und damit eine neue Komponente höherer Ordnung) jedes Mal machen, wenn Sie rendern. Reagieren wird denken, dass dies eine komplett andere Art von Komponente ist und das alte DOM zerstören wird, um das neue zu machen.

In dieser Version machen wir die hochwertige Komponente einmal, wenn Ihre Komponenteninstanz erstellt wird.

import TextField from 'material-ui/TextField'; 

var Comp = React.createClass({ 
    getInitialState: function() { 
     return {description: ""}; 
    }, 
    componentWillMount() { 
     // create HOC once for this instance 
     var self = this; 
     this.T2 = function (props) { 
      return <TextField hintText="Desc2" 
           value={self.state.description} 
           onChange={self.descriptionChanged}/>; 
     }; 
    }, 
    descriptionChanged: function (e) { 
     this.setState({description: e.target.value}); 
    }, 
    render: function() { 
     var self = this; 
     var T2 = this.T2; 
     return <div> 
      1 <TextField hintText="Desc1" 
         value={self.state.description} 
         onChange={self.descriptionChanged} 
      /> 
      2 <T2/> 
     </div> 

    } 
});