如何使自定义文本字段素材-ui-pickers的焦点稳定？

Question

当我将自定义文本字段传递给日期选择器时，每次键盘输入后焦点便会丢失。该如何解决？

沙盒示例https://codesandbox.io/embed/datepicker-y0dn7

  <DatePicker
     keyboard
     label="Masked input"
     format="DD.MM.YYYY"
     mask={value =>
       value
         ? [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/]
         : []
     }
     value={selectedDate ? moment(selectedDate) : null}
     onChange={date => {
       handleDateChange(date);
       setFormattedValue(date.format("DD.MM.YYYY"));
     }}
     error={!!errorText}
     helperText={errorText}
     TextFieldComponent={props => (
       <TextField
         {...props}
         value={formattedValue}
         onChange={event => setFormattedValue(event.target.value)}
       />
     )}
   />```

Answer 1

问题出在您的TextField onChange函数中。如果删除此属性，您将看到它不再失去焦点。也许是因为TextFieldComponent函数在您每次输入并跟随documentation，Override input component时都会呈现，这使它失去了焦点，因为每次都重新创建输入。