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页面，这里我使用的是材料组件 - 网络库。我想要输入动画，哪个工作正常。但我想使用两个相同动画的输入。我使用两个相同的mdc-textfield类div。但现在只有第一个div与类mdc-textfield工作正常但第二个显示没有动画。请帮助

Answer 1

这是因为document.querySelector（“。my_class”）返回它使用“my_class”找到的第一个元素。您可以为textfiels使用不同的引用名称，如下所示：

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 Components中。这将是一个非常简化的文本字段示例：

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）

MDC-web无法按预期工作

1 个答案: