Material Ui - 在“选择”模式下向 TextField 添加必需属性

Question

I am trying to make "required" a TextField in select mode. I tried to add required prop like in this snippet, but this does not block the submit event if I haven't select anything. Although it adds the '*' to the label.

Please check this sandbox

 <TextField id="select-currency" select label="Select" value={this.state.currency} onChange={this.handleChange("currency")} required > {currencies.map(option => ( <MenuItem key={option.value} value={option.value}> {option.label} </MenuItem> ))} </TextField>

UPDATE: (Clarification really) I am talking about html5 validation. In the sandbox example there are Select and Text fields, setting the text field as required will block the submit event and displays a native html5 error saying "this field is required", this is not the case if the field is "select".

Answer 1

Material Ui provides another component Native Select to handle this kind of native validation.

Please check this example

Answer 2

It was recently implemented in material ui. If you upgrade @material-ui/core to version 4.11.0 it will work https://github.com/mui-org/material-ui/issues/20402

Answer 3

It's not field responsibility to control form behavoiur. It's parent-child relation and top-down data passing.

Form (component) provides current value to component (validity information, change handler) to field component. Field displays content using styles and elements depending on props ( * when required, error border etc) but it's form' role to decide about value/validity/submiting.