javascript - MDC-web 未按预期工作

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;

这是我项目中的 Material.js 页面，这里我使用的是 material-components-web 库。我希望输入动画效果很好。但我想使用两个具有相同动画的输入。我使用了两个相同的 mdc-textfield 类的 div。但现在只有第一个具有 mdc-textfield 类的 div 工作正常但第二个显示没有动画。请帮助

Answer 1

这是因为 document.querySelector(".my_class") 返回它找到的带有“my_class”的第一个元素。您可以像这样为文本字段使用不同的引用名称:

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>

我通常将 MDC 组件包装在 React JS 组件中。这是一个非常精简的文本字段示例:

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

然后像这样使用:

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

编辑如果您想将 MDC 与 ReactJS 一起使用并想要轻松的生活，我建议您使用:RMWC ( https://github.com/jamesmfriedman/rmwc ) 并希望很快来自 Google 的官方 React Wrapper ( https://github.com/material-components/material-components-web-react )