Materializecss 数据长度在反应中不起作用答案

【问题标题】：Materializecss data-length not working in reactMaterializecss 数据长度在反应中不起作用
【发布时间】：2020-07-07 17:58:30
【问题描述】：

这是我在屏幕上呈现的应用程序组件，但传递给输入字段的数据长度属性不起作用，否则工作得非常好。您可以在 materialize css 的官方文档上轻松查看：- https://materializecss.com/text-inputs.html

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;

【问题讨论】：

标签： reactjs materialize

【解决方案1】：

在 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;

【讨论】：