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