Блог

Я использую Material UI версии 4 (последнюю) и библиотеку Informed form. У меня есть пользовательский компонент (настраиваемый для интеграции с Informed), который оборачивает текстовое поле пользовательского интерфейса Material, которое я визуализирую с помощью компонента автозаполнения.

Компонент приложения

     <Form getApi={(api) => setFormApi(api)}>
      {formApi amp;amp; (
        <>
          <label>
            First name:
            <Autocomplete
              freeSolo
              options={autoOptions}
              renderInput={(params) => (
                <CustomTextField field="name" {...params} />
              )}
            />
          </label>
          <button type="submit">Submit</button>
          <button type="button" onClick={() => formApi.reset()}>
            Reset
          </button>
          <FormState />
        </>
      )}
    </Form>
  

Проблема

При нажатии кнопки сброса вы можете увидеть, что информированное «состояние формы» очищается, но ввод по-прежнему имеет значение. Есть идеи о том, как это решить?

Пример — Codesandbox

inputProps Они переопределяются теми, которые предоставляются Autocomplete компонентом, измените порядок передачи ...rest реквизитов и включите ...rest.inputProps их в свой пользовательский inputProps с правильным значением

       <TextField
        {...rest} // should go first to allow overriding
        // only add value props for select fields
        // value={value}
        onChange={(event) => {
          setValue(event.target.value);
          if (onChange) {
            onChange(event);
          }
        }}
        onBlur={(event) => {
          setTouched(true);
          if (onBlur) {
            onBlur(event);
          }
        }}
        error={!!error}
        helperText={error ? error : helperText ? helperText : false}
        variant="outlined"
        margin="none"
        fullWidth
        inputProps={{
          ...rest.inputProps, // must include otherwise it breaks
          value:
            !select amp;amp; !maskedValue amp;amp; maskedValue !== 0 ? "" : maskedValue,
          maxLength: maxLength || undefined
        }}
        // eslint-disable-next-line
        InputProps={{
          style: sensitive amp;amp; {
            color: "rgba(0,0,0,0)",
            caretColor: "#000"
          },
          startAdornment
        }}
        InputLabelProps={{
          shrink: true
        }}
        autoComplete="off"
        disabled={disabled}
      />