1 
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 工作正常，但第二个没有显示动画。请帮助

4

1 回答 1

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 )

于 2017-10-11T08:48:13.997 回答