材質設計組件及reactjs輸入字段

Question

所以我要MDC finially與之反應工作，並使用谷歌文檔我曾指出，我一些如何需要reactjs運行以下JS時，在輸入欄上，用戶點擊 - basiclly標籤應該移動輸入以上，使用戶可以鍵入 - 就像我的純HTML/JS演示https://codepen.io/russellharrower/pen/oeReEN

與reactjs我發現我不能把下面的代碼在Render區域

不過，所以我想知道在那裏我會放置如何？

(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); 
     } 
     })(); 

充分reactjs代碼更新

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; 

最新更新 我在然而加入這兩個函數出於某種原因（函數（）{}）（）;腳本的時候，它會做一個警告等它不會允許的文本標籤移動像codepen.io演示

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); 
}; 

Answer 1

即使你的方法在某種程度上結束工作。它看起來確實不是一個非常愉快的方式來繼續開發，並且你的代碼將成爲其他人以後（或你自己）閱讀的噩夢。 它實際上可以做得更容易。我通常會爲我需要的MDC組件編寫react.js包裝器。下面是文本框的例子：

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 

你可以看看這裏react.js官方MDC演示（https://github.com/material-components/material-components-web/tree/master/framework-examples/react）。

對於造型，我包括MDC SCCS文件到我的SCSS文件，並改變我所需要的值。例如：

$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";