Question

我正在使用Google的Material Design Lite Web框架构建一个简单的登录页面，并使用React.js来处理我的UI逻辑。

我遇到了一个非常奇怪的问题：当我在没有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，将for替换为htmlFor。但它不起作用，预期的标签，从不“浮动”意味着它保留在文本框内。

当我复制相同的代码并将其粘贴到HTML中时，它可以正常工作。（当然，我更改了className和htmlFor）。

可能是什么问题？有帮助吗？这让我疯了。

Answer 1

虽然@Kevin E。＆＃39;答案是正确的，我将发布一个特定于React的答案。根据官方MDL文档，

...在您需要动态创建DOM元素的情况下使用upgradeElement函数
注册新元素

问题在于React的工作方式。显然，事实证明，当其任何组件在其外部发生变异时，反应并不喜欢。

MDL尝试使用类mdl-js-*变异所有元素，以实现一些动态转换和效果。这个突变必须从React内部执行，否则事情就不会起作用。

这样做的正确方法是在React完成呈现DOM之后立即调用upgradeElement。因此，通话必须放在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 for MDL只对DOM中已有的元素进行初始化。

您可以像这样使用componentHandler手动“升级”元素;

<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中的一个组件解决了它，为我渲染了textfields / areas / radio按钮和复选框。

希望这有帮助！

使用React.js呈现MDL文本字段时出现问题

2 个答案: