CODEWITHSUNDEEP
javascriptreactjsmaterial-components
Abhishek
Abhishek

Reputation: 351

MDC-web not working as expected

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;

this is my page Material.js in my project and here i'm using material-components-web library.I want input to animate which was working fine. but i wanted to use two inputs with same animation.i used two identical div of class mdc-textfield.But now only 1st div with class mdc-textfield is working fine but 2nd shows no animation.please help

Upvotes: 1

Views: 1285

Answers (1)

Jodo
Jodo

Reputation: 4763

This is because document.querySelector(".my_class") returns the first elements that it finds with "my_class". You can uses different ref names for the textfiels like this:

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>

I usually wrap the MDC Components in React JS Components. Here would be a very stripped down example for a textfield:

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

Then use like this:

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

EDIT If you want to use MDC with ReactJS and want an easy life, I would suggest using: RMWC (https://github.com/jamesmfriedman/rmwc) and hopefully soon the official React Wrapper from Google (https://github.com/material-components/material-components-web-react)

Upvotes: 1

Related Questions