重置通知状态时，Material UI 自动完成组件不会清除输入

Question

我正在使用 Material UI 版本 4（最新）和Informed 表单库。我有一个自定义组件（自定义与 Informed 集成），它包装了我使用自动完成组件渲染的 Material UI TextField。应用程序组件   <Form getApi={(api) => setFormApi(api)}>      {formApi && (        <>          <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>问题单击重置按钮后，您可以看到 Informed&ldquo;表单状态&rdquo;被清除，但输入仍然有值。关于如何解决这个问题有什么想法吗？示例 - Codesandbox

Answer 1

它们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 && !maskedValue && maskedValue !== 0 ? "" : maskedValue,

          maxLength: maxLength || undefined

        }}

        // eslint-disable-next-line

        InputProps={{

          style: sensitive && {

            color: "rgba(0,0,0,0)",

            caretColor: "#000"

          },

          startAdornment

        }}

        InputLabelProps={{

          shrink: true

        }}

        autoComplete="off"

        disabled={disabled}

      />