在 REACT JS 中验证 Select-Option

Question

我正在使用 select - 用于呈现下拉内容的选项。

代码：

                 <FormControl
                     className="form-input-field"
                      error={true}
                    >
                      <div>
                        <select
                          required
                          onChange={(event) =>
                            this.props.handleChange(event)
                          }
                          id="Payment"
                          name="Payment"
                        >
                          <option value="">Select</option>
                          {this.props.DataMap.map((product, key) => (
                            <option
                              key={product.tableKey}
                              value={
                                [this.props.DataMap.Payment]
                                  .Value
                              }
                            >
                              {product.payment}
                            </option>
                          ))}
                        </select>
                      </div>
                     </FormControl>

我想要同样的验证。

我试过： 放置必填字段 // 使用 renderValue={(value) => ⚠️ - ${value} } // 将 FormControl 的错误变量设置为 true // 在 Form 中设置验证 ={true} 等。

使用输入内容验证和 FormHelperText 来显示错误，它工作正常。

但是，当出现错误时，有没有办法让下拉框以红色突出显示......？

我不能使用 MenuItem，因为我需要获取 map 内容来动态呈现下拉内容。

如果有人遇到过/处理过类似的问题，请建议。