MaterializeCSS选择框，如何让它与react一起工作

MaterializeCSS Select Box, How to get it to work with Reactjs

本文关键字：react 一起 工作 选择 MaterializeCSS      更新时间：2023-09-26

我正在使用MaterializeCss，我想知道我如何得到它的选择框与reactjs工作

我有这个

 <div className="input-field col m6 lg6">
                                    <select name="selectedUnitType" value={this.state.selectedUnitType}  onChange={ (event) => this.handleChange(event) }  >
                                        {
                                            this.props.unitTypes.map((unitTypes, i) => {
                                                return <option key={'unitTypes-' + i}  value={unitTypes.id}>{unitTypes.name}</option>;
                                            })
                                        }
                                    </select>
                                </div>

我就有了这两个函数

validate() {
    console.log(this.state);
}
handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
}

handleChange应该改变状态，validate将在我的"add"按钮上执行，现在只是记录状态，所以我可以看到它是否改变了。

但是materializecss对dom做了一些改变，最后的html输出看起来像这样

 <div class="select-wrapper initialized">
   <span class="caret">▼</span><input type="text" class="select-dropdown" readonly="true" data-activates="select-options-de36c20b-d50b-3b4b-2349-6d9f35e507f0" value="Meat">
   <ul id="select-options-de36c20b-d50b-3b4b-2349-6d9f35e507f0" class="dropdown-content select-dropdown ">
      <li class=""><span>Meat</span></li>
      <li class=""><span>Fruit</span></li>
   </ul>
   <select class="initialized">
      <option value="839751d4-7ed8-4aee-b439-12c7bfb47f43">Meat</option>
      <option value="6b31ef3e-ad80-40fa-899a-9523dd2260b4">Fruit</option>
   </select>
</div>

所以我不太确定怎么做，因为现在它被改成了无序列表

Materialize将把您的选择输入改为UL，选项改为li。

给包含select输入的div一个id，并使用它来触发文本输入值更改事件(jquery)。

<div class="input-field col m6 lg6" id="selectUnitTypeDiv">
<div class="select-wrapper initialized">
<span class="caret">▼</span><input type="text" class="select-dropdown"    readonly="true" data-activates="select-options-de36c20b-d50b-3b4b-2349-6d9f35e507f0" value="Meat">
<ul id="select-options-de36c20b-d50b-3b4b-2349-6d9f35e507f0" class="dropdown-content select-dropdown ">
  <li class=""><span>Meat</span></li>
  <li class=""><span>Fruit</span></li>
</ul>
</div>
</div>

在组件的componentDidMount中写入onchange事件:

   componentDidMount(){
     $('#selectUnitTypeDiv .select-wrapper input[type=text]').change(function() {
           this.setState({ /*whatever the variable is*/ });
     });
   }
相关文章：