实现“选择”组件在React中不起作用

Question

正如问题中所述，我正在尝试使用 MaterialiseCSS / 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?

我已经四处搜寻，但似乎无法找到其他人描述相同行为的线索。

Answer 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）。 MaterialiseCSS使用jQuery与许多（如果不是全部）组件进行交互。

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