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

Question

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

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

我包括：

我的componentDidMount（）方法如下所示：

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

在我的render（）函数中，我有来自

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

的示例代码：

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>

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

Answer 1

你不应该在React中使用jQuery。 React使用虚拟DOM来制作UI，而jQuery使用普通的浏览器DOM。这意味着如果您开始使用jQuery来处理状态，React将不再处理状态，事件和UI呈现。 （How do I get the Materialize select dropdown to work with React?）。 MaterialiseCSS使用jQuery与许多（如果不是全部）组件进行交互。

此外，在您的渲染函数中，react使用camelCasing对所有DOM属性和属性（包括事件处理程序）。您将需要使用https://hashnode.com/post/why-is-it-a-bad-idea-to-mix-jquery-and-react-cit77t20z02j5fq536wlyiwtk而不是className来正确使用css类。