物化 css --select-- 在反应中不起作用答案

【问题标题】：Materialize css --select-- not working in react物化 css --select-- 在反应中不起作用
【发布时间】：2018-03-02 22:20:53
【问题描述】：

我正在使用基本的物化 css，出于某种原因，即使我直接从 materializecss.com 网站复制它，我的选择选项也只显示标签，没有其他内容。

EDIT添加了 index.hjs 页面以供脚本参考。

在我的 index.hjs 中，这里是我对具体化 css 的所有导入：

<!DOCTYPE html>
<html>

<head>
  <title>{{ title }}</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>

<body>
  <div id="root"></div>

  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script type="text/javascript" src="/build/bundle.js"></script>
</body>

</html>

代码如下：

      <div>
        <div className="row">
          <div className="input-field col s12 m6">
            <input
              onChange={this.updateTask.bind(this)}
              id="title"
              type="text"
            />
            <label htmlFor="title">Title</label>
          </div>
        </div>
        <div className="row">
          <div className="input-field col s12 m6">
            <input
              onChange={this.updateTask.bind(this)}
              id="description"
              type="text"
            />
            <label htmlFor="description">Description</label>
          </div>
        </div>
        <div className="row">
          <div className="input-field col s12">
            <select id="category" onChange={this.updateTask.bind(this)}>
              <option value="" disabled selected>
                Choose your category
              </option>
              <option value="delivery">Delivery</option>
              <option value="dog walking">Dog Walking</option>
              <option value="house cleaning">House Cleaning</option>
            </select>
            <label>Category</label>
          </div>
        </div>
        <div className="row">
          {/* <button
            onClick={this.submitTask.bind(this)}
            className="btn waves-effect waves-light"
            >
            Submit
            <i className="material-icons right">send</i>
          </button> */}
        </div>
      </div>

【问题讨论】：

我认为你也需要物化的 js 文件。
下拉菜单位于“Javascript”部分。 Check here
我已经有了 jquery 和 js 脚本，在编辑中添加了页面，我的意思是选择不下拉。

标签： html css reactjs materialize

【解决方案1】：

对于选择输入，这似乎有点多，但经过一些研究，我发现了如何解决这个问题。

首先你需要进入你有选择输入的组件。

在componentDidMount() 的该组件中，您将添加以下内容：

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

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

确保在顶部从react-dom 导入ReactDOM

在此之后，您需要在您的 select 中创建一个 ref 值，如下所示：

        <select
          ref="dropdown"
          id="category"
          defaultValue="1"
          onChange={this.updateTask.bind(this)}
        >

请注意，引用与 this.refs.dropdown 匹配。现在，由于我们使用的是 jQuery，我们需要确保它能够正常工作，为此，您需要转到您的 webpack.config.js 文件并添加以下插件。

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

现在你已经准备好了，应该准备好了。

【讨论】：

【解决方案2】：

Materialize.css 覆盖浏览器默认设置以启用选择标签。为避免这种情况，您可以在选择标签中使用“浏览器默认”类。

<select class="browser-default">
      <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>

【讨论】：

【解决方案3】：

您还可以使用“react-materialize”包将物化到您的反应应用程序中。设置完成后，它可以让您进行选择，而无需像更改您的 componentDidMount() 或删除样式这样的任何奇怪的技巧：

<Row>
  <Input type="select" value={}>
    <option value={} key={}> your option here</option>
  </Input>
<Row>

更多信息请参见https://react-materialize.github.io/#/forms

【讨论】：