Question

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

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

在我的index.hjs中，这是我对materialize 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>

Answer 1

Materialize.css会覆盖浏览器默认值以启用select标记。为避免这种情况，您可以在select标记中使用“browser-default”类。

<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>

Answer 2

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

首先，您需要进入具有选择输入的组件。

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

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

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

确保从ReactDOM

的顶部导入react-dom

在此之后，您需要在ref中设置select值，如下所示：

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

请注意，ref与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"
  })
]

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

Answer 3

您还可以使用“ react-materialize”包将其具体化到您的react应用中。设置好之后，它就可以选择，而不会像更改componentDidMount（）或删除样式这样的怪癖了：

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

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

实现css - 选择 - 不参与反应

3 个答案: