MDC-web ne fonctionne pas comme prévu

Question

import React, { Component } from "react"; 
import { MDCTextfield, MDCTextfieldFoundation } from "@material/textfield"; 
import { MDCFormField, MDCFormFieldFoundation } from "@material/form-field"; 
class Material extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    this.textfield_ = new MDCTextfieldFoundation(
     document.querySelector(".mdc-textfield") 
    ); 
    } 

    componentDidMount() { 
    const textfield = new MDCTextfield(
     document.querySelector(".mdc-textfield") 
    ); 
    } 

    render() { 
    return (
     <div> 
     <form> 
      <div className="mdc-textfield"> 
      <input type="email" id="" className="mdc-textfield__input" /> 
      <label htmlFor="email" className="mdc-textfield__label"> 
       Email address1 
      </label> 
      </div> 

      <div className="mdc-textfield"> 
      <input type="email" id="email" className="mdc-textfield__input" /> 
      <label htmlFor="email" className="mdc-textfield__label"> 
       Email address3 
      </label> 
      </div> 
     </form> 
     </div> 
    ); 
    } 
} 
export default Material; 

Ceci est ma page Material.js dans mon projet et ici j'utilise material-components-web library.Je veux une entrée pour animer qui fonctionnait bien. mais je voulais utiliser deux entrées avec la même animation.j'ai utilisé deux div identiques de la classe mdc-textfield.But maintenant seulement 1ère div avec la classe mdc-textfield fonctionne bien mais la 2e montre pas d'animation.please help

Answer 1

Ceci est car document.querySelector (". my_class") renvoie les premiers éléments trouvés avec "my_class". Vous pouvez utiliser différents noms ref pour les textfiels comme celui-ci:

componentDidMount() { 
    const textfield_email = new MDCTextfield(this.refs.textfield_email); 
    const textfield_name = new MDCTextfield(this.refs.textfield_name); 
} 


... 


<label ref="textfield_email" className="mdc-textfield "> 
    <input name="email" className="mdc-textfield__input" onChange={this.handleChange} value={this.state.email} /> 
    <span className="mdc-textfield__label">Email</span> 
</label> 
<label ref="textfield_name" className="mdc-textfield "> 
    <input name="name" className="mdc-textfield__input" onChange={this.handleChange} value={this.state.name} /> 
    <span className="mdc-textfield__label">Name</span> 
</label> 

J'enveloppe habituellement les composants MDC dans React JS Composants. Ici serait très dépouillée par exemple pour un champ de texte:

import React from 'react'; 
import { MDCTextfield } from '@material/textfield/dist/mdc.textfield'; 

class Textfield extends React.Component { 
    componentDidMount() { 
     const textfield = new MDCTextfield(this.refs.textfield); 
    } 

    static defaultProps = { 
     label: "", 
     className: "", 
     name: "", 
     onChange: function() {} 
    } 

    render() { 
     return (
      <div className={this.props.className}> 
       {/* Text field component */} 
       <label ref="textfield" className="mdc-textfield " id={this.props.id} > 
        <input name={this.props.name} className="mdc-textfield__input" onChange={this.props.onChange} value={this.props.value} /> 
        <span className="mdc-textfield__label">{this.props.label}</span> 
       </label> 
      </div> 
     ); 
    } 
} 
export default Textfield 

ensuite utiliser comme ceci:

<Textfield onChange={this.handleChange} value={this.state.value} label="email" name="email"></Textfield>