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

Question

这是我在屏幕上呈现的应用程序组件，但传递给输入字段的数据长度属性不起作用，其他情况下工作得很好。您可以在 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;

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

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

Materializecss data-length not working in react

materialize

reactjs