Materializecss数据长度无法正常工作|软件开发问答库

import React, { Component } from "react"; import M from "materialize-css"; class App extends Component { componentDidMount() { M.AutoInit(); } render() { return ( <div class="row"> <form class="col s12"> <div class="row"> <div class="input-field col s6"> <input id="input_text" type="text" data-length="10" /> <label for="input_text">Input text</label> </div> </div> <div class="row"> <div class="input-field col s12"> <textarea id="textarea2" class="materialize-textarea" data-length="120" ></textarea> <label for="textarea2">Textarea</label> </div> </div> </form> </div> ); } } export default App;

对于React，无论何时我们使用某种第三方库或框架，都需要使用componentDidMount()来初始化它们提供的js组件。

有几项与实现文档不同-

导入import "materialize-css/dist/css/materialize.min.css";
componentDidMount中的初始化
使用maxLength属性而不是data-length。

Codesandbox working demo。

对于其他组件，您可以检查Reactize

代码

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";

class Counter extends Component {
  constructor() {
    super();

    this.state = {
      text: ""
    };
  }

  componentDidMount() {
    let input = document.getElementById("input_text");
    M.CharacterCounter.init(input);
  }

  onTextChange = event => {
    this.setState({
      text: event.target.value
    });
  };

  render() {
    return (
      <div className="row">
        <form className="col s12">
          <div className="row">
            <div className="input-field col s6">
              <input
                id="input_text"
                type="text"
                maxLength="10"
                onChange={this.onTextChange}
                value={this.state.text}
              />
              <label htmlFor="input_text">Input text</label>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

export default Counter;