为什么标签显示在选择框中？

Question

为什么我的选择框标签显示在exports.getDiscount = functions.https.onCall((data, context) => { var item = data.item; var make = data.make; var baseDiscount = 0; var baseDiscountId = ""; var discount = 0; var discountMatchDepth = 0; if (make === "ford"){ baseDiscountId = "ford-base-discount"; } if (make === "chevy"){ baseDiscountId = "chevy-base-discount"; } //fetchDiscounts() simply pushes each sku-prefix/discount to array of arrays return fetchDiscounts().then(function(discounts) { //calculate discount for (var i = 0; i < discounts.length; i++) { if (discounts[i][0] === baseDiscountId) { baseDiscount = discounts[i][1]; } if (item.startsWith(discounts[i][0])) { if (discounts[i][0].length > discountMatchDepth) { discountMatchDepth = discounts[i][0].length; } discount = discounts[i][1]; } } if(discount === 0) { discount = baseDiscount; } return {discount: discount}; }); }); 框内。例如，我没有使用react -material-validator。它显示如下 https://codesandbox.io/s/5vr4xp8854

当我尝试使用react-material-ui-form-validator插件来验证我的选择框时，我的标签位于select bx内，为什么 这是我的代码 插件： https://www.npmjs.com/package/react-material-ui-form-validator https://codesandbox.io/s/38x8q8zpm5

第二，当我提交我的标签时，为什么不显示红色？

select

Answer 1

看起来像Material UI FormValidator包只是带有label属性。您应该删除

<InputLabel htmlFor="age-simple">
   Age
</InputLabel>

并添加label的{​​{1}}和InputLabelProps到您的SelectValidator属性，例如：

<SelectValidator
   required
   label="Age"
   InputLabelProps={{ shrink: true }}
   value=""
   name="name"
   .......

这还将解决您的标签在用户点击无选择的提交时不会显示为红色的情况。