材料設計コンポーネントとreactjs入力フィールド

Question

私はMDCを有限会社Reactと協力し、Googleドキュメントを使用しています。ユーザーが入力フィールドをクリックしたときに次のJSを実行するにはreactjsが必要ですユーザーが入力できるように入力してください - 私の純粋なHTML/JSデモのようにhttps://codepen.io/russellharrower/pen/oeReEN

私は気付いたが、私はレンダリングエリアに下のコードを置くことができないので、どこに置くのだろうか？そしてどうやって？

(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 

あなたはここ（https://github.com/material-components/material-components-web/tree/master/framework-examples/react）react.jsの公式MDCデモをチェックアウトすることができます。

スタイリングのために、私は自分のscssファイルにmdc sccsファイルを含めて、必要な値を変更します。例：

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