物化“选择”组件在 React 中不起作用答案

【问题标题】：Materialize 'Select' component not working in React物化“选择”组件在 React 中不起作用
【发布时间】：2017-12-28 16:30:09
【问题描述】：

如问题所述，我正在尝试在 MaterializeCSS/React 中使用 Select 组件，网页呈现如下所示：

文本显示为灰色，我无法单击或与之交互。这是我的相关代码：

我已包括：

import ReactDOM from 'react-dom';
import $ from 'jquery';

我的 componentDidMount() 方法如下所示：

componentDidMount() {
  var element = ReactDOM.findDOMNode(this.refs.dropdown)
  $(element).ready(function() {
    $('select').material_select();
  });
}

在我的 render() 函数中，我有来自Materialize Website 的示例代码：

<div class="input-field offset-s3 col s1">
  <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>

我在这里做错了什么？我遵循了这里给出的建议，但它似乎不起作用：

How do I get the Materialize select dropdown to work with React?

我四处搜寻，但似乎找不到其他人描述相同行为的线程。

【问题讨论】：

标签： javascript jquery reactjs materialize

【解决方案1】：

你不应该在 React 中使用 jQuery。 React 使用虚拟 DOM 来制作 UI，而 jQuery 使用普通浏览器 DOM。这意味着如果你开始使用 jQuery 处理状态，React 将不再处理状态、事件和 UI 渲染。 (https://hashnode.com/post/why-is-it-a-bad-idea-to-mix-jquery-and-react-cit77t20z02j5fq536wlyiwtk)。 MaterializeCSS 使用 jQuery 与它们的许多（如果不是全部）组件进行交互。

此外，在您的渲染函数中，react 对所有 DOM 属性和属性（包括事件处理程序）使用 camelCasing。您需要使用className 而不是class 才能正确使用css 类。

【讨论】：

所以你是说 React 和 Materialize 通常不是一个很好的组合？
@RitwikBis 是的。您可能可以使用 materialize 中的 css 并在 React 中创建自己的逻辑，但这有点笨拙。我会尝试找到一个特定于 React 的组件库来使用。