Простейшие компоненты и материалы высокого порядка-ui

Question

Когда я использую TextField непосредственно из моего компонента, он отлично работает (случай 1), однако, когда я обертываю его внутри функции (случай 2) из ​​реквизита, он теряет фокус после одного каждый изменение.

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

Почему это происходит и как я могу это исправить?

Answer 1

Это потому, что вы делаете новую функцию (и, следовательно, новый компонент высокого порядка) при каждом рендеринге. Реакция будет думать, что это совершенно другой тип компонента и уничтожит старый DOM, чтобы сделать новое.

В этой версии мы создаем компонент высокого порядка после создания экземпляра компонента.

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> 

    } 
});