Javascript 材料设计组件及组件；reactjs输入字段

因此，我让MDC最终与React合作，并使用Google文档，我发现当用户单击输入字段时，我需要React JS运行以下JS—基本上标签应该移动到输入上方，以便用户可以键入—就像我的纯HTML/JS演示一样

然而，对于reactjs，我注意到我不能将下面的代码放在渲染区域中，所以我想知道我应该将它放在哪里以及如何放置

(function() {
        var tfs = document.querySelectorAll(
          '.mdc-textfield:not([data-demo-no-auto-js])'
        );
        for (var i = 0, tf; tf = tfs[i]; i++) {
          mdc.textfield.MDCTextfield.attachTo(tf);
        }
      })();

完整代码已更新

import React, { Component } from 'react';
import './App.css';
import * as mdc from 'material-components-web';

class App extends Component {
    hrefjs(l){
            var script   = document.createElement("script");
            script.type  = "text/javascript";
            script.src   = l;    // use this for linked script
            document.body.appendChild(script);
    }


    componentWillMount() {
            this.hrefjs("//unpkg.com/material-components-web@latest/dist/material-components-web.min.js");
            var texst ="(function(){var tfs = document.querySelectorAll('.mdc-textfield:not([data-demo-no-auto-js])'); for (var i = 0, tf; tf = tfs[i]; i++) {mdc.textfield.MDCTextfield.attachTo(tf); mdc.autoInit();}})();"
            const script = document.createElement("script");
            script.text=texst;
            document.body.appendChild(script);
    };
  render() {
    return (
      <div className="App">
        <header className="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--waterfall">
          <div className="mdc-toolbar__row">
            <section className="mdc-toolbar__section mdc-toolbar__section--align-start">
              <span className="mdc-toolbar__title">Title</span>
            </section>
          </div>
        </header>
        <main className="demo-main mdc-toolbar-fixed-adjust">

            <div className="mdc-form-field">
              <div className="mdc-checkbox">
                <input type="checkbox"
                       id="my-checkbox"
                       className="mdc-checkbox__native-control"/>
                <div className="mdc-checkbox__background">
                  <svg className="mdc-checkbox__checkmark"
                       viewBox="0 0 24 24">
                    <path className="mdc-checkbox__checkmark__path"
                          fill="none"
                          stroke="white"
                          d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                  </svg>
                  <div className="mdc-checkbox__mixedmark"></div>
                </div>
              </div>
              <label htmlhtmlhtmlFor="my-checkbox" id="my-checkbox-label">This is my checkbox</label>
            </div>
            <section className="example">
                 <div className="mdc-textfield">
                      <input type="text" id="username" className="mdc-textfield__input" aria-controls="username-helptext"/>
                      <label htmlFor="username" className="mdc-textfield__label">Username</label>
                    </div>
                    <p id="username-helptext" className="mdc-textfield-helptext" aria-hidden="true">
                      This will be displayed on your public profile
                    </p>
              </section>
        </main>
        <script>
        mdc.toolbar.MDCToolbar.attachTo(document.querySelector('.mdc-toolbar'));
        //mdc.textfield.MDCToolbar.attachTo(document.querySelector('.mdc-textfield'));
        //mdc.autoInit();
        </script>

        </div>
    );
  }
}

export default App;

---

即使你的方法最终能奏效。继续开发代码看起来并不是一种非常愉快的方式，您的代码将成为其他人（或您自己）以后阅读的噩梦。 这实际上可以做得容易得多。我通常为我需要的MDC组件编写react.js包装。下面是textfield的一个示例：

import React from 'react';
import { MDCRipple } from '@material/ripple/dist/mdc.ripple';

class MdcButton extends React.Component {
    constructor(props) {
        super(props);
        // Init state
        this.state = {}
    }

    componentDidMount() {
        if (this.props.ripple)
            MDCRipple.attachTo(this.refs.button);
    }

    static defaultProps = {
        ripple: true,
        raised: true,
        disabled: false,
        className: "",
        type: "submit"
    }

    render() {
        let className = "mdc-button " + this.props.className;
        if (this.props.raised)
            className += " mdc-button--raised";

        return (
            <button
                ref="button"
                id={this.props.id}
                className={className}
                type={this.props.type}
                onClick={this.props.onClick}
                disabled={this.props.disabled}
            >
                {this.props.children}
            </button>
        );
    }
}

export default MdcButton

---

即使你的方法最终能奏效。继续开发代码看起来并不是一种非常愉快的方式，您的代码将成为其他人（或您自己）以后阅读的噩梦。 这实际上可以做得容易得多。我通常为我需要的MDC组件编写react.js包装。下面是textfield的一个示例：

import React from 'react';
import { MDCRipple } from '@material/ripple/dist/mdc.ripple';

class MdcButton extends React.Component {
    constructor(props) {
        super(props);
        // Init state
        this.state = {}
    }

    componentDidMount() {
        if (this.props.ripple)
            MDCRipple.attachTo(this.refs.button);
    }

    static defaultProps = {
        ripple: true,
        raised: true,
        disabled: false,
        className: "",
        type: "submit"
    }

    render() {
        let className = "mdc-button " + this.props.className;
        if (this.props.raised)
            className += " mdc-button--raised";

        return (
            <button
                ref="button"
                id={this.props.id}
                className={className}
                type={this.props.type}
                onClick={this.props.onClick}
                disabled={this.props.disabled}
            >
                {this.props.children}
            </button>
        );
    }
}

export default MdcButton

---

您可以向componentDidMount添加javascript代码。它将在组件渲染后运行感谢我添加了组件Willmount part在脚本运行时它似乎不喜欢我们添加脚本的事实。他们想让它先加载吗？我能够让它工作，使它成为一个onClick函数，但是，我确信这不是google想要的。你可以将javascript代码添加到你的组件中。它将在组件渲染后运行感谢我添加了组件Willmount part在脚本运行时它似乎不喜欢我们添加脚本的事实。他们是不是想让它先加载？我本来可以让它工作的，让它成为一个onClick函数，但是，我肯定这不是谷歌想要的？

$mdc-theme-primary: #404040;
$mdc-theme-accent: #a349a3;
$mdc-theme-background: #fff;  

@import "@material/ripple/mdc-ripple";
@import "@material/typography/mdc-typography";
@import "@material/theme/mdc-theme";
@import "@material/button/mdc-button";