Question

添加以下模板代码provided by Materialize不会立即在React组件中起作用：

<div class="input-field col s12">
  <select>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>
</div>

如何解决这个问题，以便选择下拉列表有效？

Answer 1

您需要进行一些调整才能使其正常工作。

首先，输入react-dom。

import ReactDOM from 'react-dom';

其次，在组件中的render方法之前添加componentDidMount生命周期方法。这使用react-dom通过你提供名为'dropdown'的ref来获取select元素，然后使用上面Sanath提到的jQuery方法。

componentDidMount() {
  var element = ReactDOM.findDOMNode(this.refs.dropdown)

  $(element).ready(function() {
    $('select').material_select();
  });
}

render() {
...

第三步，将代码添加到组件中。注意：（1）'selected'已从第一个选项元素中删除，（2）一个名为'dropdown'的ref被添加到select元素中，（3）className被用来代替class（它是一个React的东西）。

render() {
  return (
    <div className="input-field col s12">
      <select ref="dropdown" defaultValue="1">
        <option value="" disabled>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <label>Materialize Select</label>       
    </div>
  );
}

最后，如果你正在使用webpack，你需要使用webpack.ProvidePlugin指向jQuery的一些特定方法。

var webpack = require("webpack");

module.exports = {
...
plugins: [
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      "Hammer": "hammerjs/hammer",
      createDayLabel: "jquery",
      createWeekdayLabel: "jquery",
      activateOption: "jquery",
      leftPosition: "jquery"
  })
]

重新加载webpack / server，你很高兴。

Answer 2

在componentDidMount（）中添加了M.AutoInit（）起作用了！

componentDidMount() {
    console.log("component did mount");
    M.AutoInit();
}

Answer 3

另一种方法是从＆＃39; react-materialize＆＃39;导入{Input}。代码可能如下所示：

<Input s={12} 
name={props.name} 
type='select' 
label={props.label} 
defaultValue={props.content}
onChange={props.handlerFunction}>
    {selectorOptions}
</Input>

将selectorOptions作为简单的JS对象数组，例如：

let selectorOptions = props.options.map( (option, index) => {
 return (
    <option key={index} value={Object.keys(option)[0]}>
       {Object.values(option)[0]}
    </option>
  )
})

Answer 4

解决方法是使用while(int i <arr.length) { while(int j<arr[i].length) { arr[i][j] = counter++; j++; } i++; } while(int i <arr.length) { System.out.print(" arr [ " + i + " ] = "); while(int j<arr[i].length) { System.out.print(arr[i][j] + " "); j++; } System.out.println(" "); i++; }作为班级名称。

browser default

Answer 5

如果你不想使用＆＃39; react-dom＆＃39;图书馆我认为你正在使用＆＃39; materialize-css＆＃39;正如它在materializecss网页中所说的那样。为此，您必须在组件中执行此操作：

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

export default class Navbar extends Component{
    componentDidMount(){
        console.log(M);
        M.AutoInit();
    }
    render(){
        return (
              <div>
               <div className="input-field col s12">
                <select defaultValue="">
                  <option value="" disabled >Choose your option</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
                  <option value="3">Option 3</option>
                </select>
                <label>Materialize Select</label>
              </div>
              </div>
            )
    }
}

Answer 6

首先尝试从Materializecss导入M：

import M from 'materialize-css';

如上所述，在M.AutoInit()中添加componentDidMount()效果很好。

componentDidMount() {
    M.AutoInit();
    ...
}

但是写此答案的目的是因为在我的情况下，我正在更改状态，以便可以显示/隐藏某些元素，并且<select>的标签在第一个执行时render()被隐藏了。时间。因此，如果还添加以下内容，那将是安全的：

componentDidUpdate() {
  M.AutoInit();
  ...
}

在显示/隐藏元素时，必须在M.AutoInit()中添加componentDidUpdate()。

Answer 7

首先通过npm或yarn安装materialize-css。然后按照下面的代码。

import React, { useEffect } from "react";
import M from "materialize-css";
const Orders = (props) => {
  useEffect(() => {
    // imitialize dropdown
    var elems = document.getElementById("sel");
    var instances = window.M.FormSelect.init(elems, {});
  }, []);

  return (
    <div class="input-field col s12">
      <select  id="sel">
        <option value="" disabled selected>
          Choose your option
        </option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <label>Materialize Select</label>
    </div>
  );
};

export default Orders;

Answer 8

首先，确保你导入了 materialize-css

import M from 'materialize-css';

然后，在页面函数内部（导出默认函数.....() ），执行以下操作：

useEffect (()=>{
        M.AutoInit();
    }, [])

如何使用Materialize选择下拉列表与React一起使用？

8 个答案: