时间戳

首页 > 解决方案 > Materializecss 数据长度在反应中不起作用

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

问题描述

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

标签： reactjsmaterialize

解决方案

在 React 的情况下，每当我们使用某种第三方库或框架时，我们都需要使用componentDidMount()它们来初始化它们提供的 js 组件。

与物化文档有一些不同的地方-

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

Codesandbox 工作演示。

对于其他组件，您可以检查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;

推荐阅读