[英]MaterializeCSS Select Box, How to get it to work with Reactjs
I am using MaterializeCss and I am wondering how I get it's select box to work with reactjs 我正在使用MaterializeCss ,我想知道如何将它与selectjs一起使用
I have this 我有这个
<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>
I then have these 2 functions 然后我有这两个功能
validate() {
console.log(this.state);
}
handleChange(event) {
this.setState({ [event.target.name]: event.target.value });
}
handleChange should change the state and validate would be executed on my "add" button and just logs right now the state so I can see if it changed. handleChange应该更改状态,并验证将在我的“添加”按钮上执行,并立即记录该状态,以便我查看其是否更改。
However materializecss does some changing of the dom and in the end the html output looks like this 但是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>
so I am not really sure how to do as now it's been changed to an unordered list 所以我不太确定该怎么做,因为现在它已更改为无序列表
Materialize will change your select input to UL and options to li. 实现将您选择的输入更改为UL,将选项更改为li。
Give a id to your div that encloses the select input and use it to trigger the text input value change event (jquery). 给您的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>
Write the onchange event in componentDidMount of the element: 在元素的componentDidMount中编写onchange事件:
componentDidMount(){
$('#selectUnitTypeDiv .select-wrapper input[type=text]').change(function() {
this.setState({ /*whatever the variable is*/ });
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.