MDC-Web funktioniert nicht wie erwartet

Question

Dies ist meine Seite Material.js in meinem Projekt und hier verwende ich Material-Komponenten-Web-Bibliothek.Ich möchte Eingabe zu animieren, die gut funktionierte. aber ich wollte zwei Eingänge mit der gleichen animation.i verwendet zwei identische div der Klasse mdc-textfield.Aber jetzt funktioniert nur 1. div mit Klasse mdc-Textfeld funktioniert gut, aber 2. zeigt keine animation.please Hilfe

Answer 1

Dies ist Weil document.querySelector (". my_class") die ersten gefundenen Elemente mit "my_class" zurückgibt. Sie können verwendet verschiedene ref Namen für die textfiels wie folgt aus:

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> 

ich in der Regel die MDC-Komponenten wickeln in React JS-Komponenten. Hier wäre ein sehr abgespeckte Beispiel für ein Textfeld:

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 

Dann wie folgt verwenden:

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