Проблема при рендеринге текстового поля MDL с помощью React.js

Question

Я создаю простую страницу входа с помощью веб-фреймворка Google Material Design Lite и используя React.js для обработки моей логики пользовательского интерфейса.

У меня возникла очень странная проблема: текстовое поле ввода с плавающей меткой отлично работает, когда я визуализую его без React, но не работает, когда отображается через класс React.

Мой код выглядит следующим образом:

var Login = React.createClass({ 

    render: function(){ 
     return(
      <div className="mdl-grid"> 
      <div className="mdl-cell mdl-cell--2-col"></div> 
      <div className="mdl-cell mdl-cell--8-col"> 

       <form> 
        <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
         <input className="mdl-textfield__input" type="text" id="sample3" /> 
         <label className="mdl-textfield__label" htmlFor="sample3">Text...</label> 
        </div> 
       </form> 



      </div> 
      </div> 
     ); 


    } 
}); 

Я уверен, что я заменить class с className и forhtmlFor с. Но это не работает, предполагаемая метка, никогда не «плавает», означает, что она остается в текстовом поле.

Когда я копирую тот же код и просто вставляю его в HTML, он отлично работает. (Конечно, я меняю className и htmlFor).

В чем может быть проблема? Любая помощь? Это меня раздражает.

Answer 1

Хотя @Kevin E. ' Ответ правильный, я отправлю ответ, специфичный для Реагирования. согласовывая официальные документы MDL,

... в том случае, когда вы создаете DOM элементы динамически вам нужно зарегистрировать новые элементы, используя функцию upgradeElement

вопрос с пути Реагирует. По-видимому, оказывается, что реакция не нравится, когда какой-либо из ее компонентов получает мутацию вне ее.

MDL пытается мутировать все элементы с классами mdl-js-*, чтобы достичь некоторых динамических переходов и эффектов. Эта мутация должна быть выполнена изнутри React, иначе все не будет работать.

Правильный способ сделать это - позвонить upgradeElement сразу после того, как React завершил рендеринг DOM. Следовательно, звонок должен быть помещен в componentDidMount и componentDidUpdate.

Если вам утомительно звонить upgradeElement на элементах по одному, используйте вместо этого upgradeDom. Он обновит все обновляемые элементы в DOM. Таким образом, окончательный код будет выглядеть примерно так:

var Login = React.createClass({ 


    loginRequested: function(){ 


    alert('login requested'); 

    }, 

    componentDidMount: function(){ 
     componentHandler.upgradeDom(); 

    }, 

    componentDidUpdate: function(){ 
     componentHandler.upgradeDom(); 
    }, 

    render: function(){ 
     return(
      <div> 
      <div className="mdl-grid"> 
      <div className="mdl-cell mdl-cell--2-col"></div> 

      <div className="mdl-cell mdl-cell--8-col"> 
      <div className="mdl-grid"> 
       <div className="mdl-cell mdl-cell--3-col"></div> 
       <div className="mdl-cell mdl-cell--6-col"> 
       <form onSubmit={this.loginRequested}> 
        <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label make-block"> 
         <input className="mdl-textfield__input" type="text" id="sample3"/> 
         <label className="mdl-textfield__label" id="label-sample3" htmlFor="sample3">Username</label> 
        </div> 
        <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label make-block"> 
         <input className="mdl-textfield__input" type="text" id="sample3"/> 
         <label className="mdl-textfield__label" id="label-sample3" htmlFor="sample3">Password</label> 
        </div> 
        <input type="submit" value="Login" className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent make-block"/> 
       </form> 
       </div> 
      </div> 


      </div> 

      </div> 
       </div> 
     ); 


    } 
}); 

Answer 2

У нас был настоящий вопрос с Ember. Проблема заключается в том, что JS для MDL инициализирует только элементы, уже находящиеся в DOM.

Вы можете вручную обновить элементы с помощью компонентаHandler следующим образом:

<div id="container"/> 
<script> 
    var button = document.createElement('button'); 
    var textNode = document.createTextNode('Click Me!'); 
    button.appendChild(textNode); 
    button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect'; 
    componentHandler.upgradeElement(button); 
    document.getElementById('container').appendChild(button); 
</script> 

Также см http://www.getmdl.io/started/ (Используйте MDL на динамических веб-сайтов).

Что я предлагаю, это обработка этого обновления в вашем классе React. Я решил это с компонентом в Ember, который отображает текстовые поля/области/переключатели и флажки для меня.

Надеюсь, это поможет!