Question

我正在使用 Material UI 库实现一个组件自动完成。

但是有一个问题 - 我不确定如何正确传递 value 和 onChange，因为我有一个 TextField 的自定义实现，它也需要 value 和 onChange。我应该将 value 和 onChange 传递两次 - 自动完成和 TextField 吗？或者也许有更好的解决方案？将不胜感激任何帮助！这是我的代码：

<policies>
<inbound>
    <set-variable name="userId" value="@(context.Request.Headers.GetValueOrDefault("Authorization","").Split(' ')[1].AsJwt()?.Subject)" />
    <cache-lookup-value key="@("templates-" + context.Variables["userId"])" variable-name="templates" caching-type="external" />
    <choose>
        <when condition="@(!context.Variables.ContainsKey("templates"))">
            <send-request mode="new" response-variable-name="templateResponse" timeout="15" ignore-error="true">
                <set-url>https://appname.azurewebsites.net/api/templates</set-url>
                <set-method>GET</set-method>
                <set-header name="Authorization" exists-action="override">
                    <value>@(context.Request.Headers.GetValueOrDefault("Authorization",""))</value>
                </set-header>
            </send-request>
            <set-variable name="templates" value="@(((IResponse)context.Variables["templateResponse"]).Body.As<string>())" />
            <cache-store-value key="@("templates-" + context.Variables["userId"])" value="@((string)context.Variables["templates"])" duration="10000" />
        </when>
    </choose>
    <base />
</inbound>
<backend>
    <base />
</backend>
<outbound>
    <set-body>@((string)context.Variables["templates"])</set-body>
    <base />
</outbound>
<on-error>
    <base />
</on-error>

Answer 1

Material UI 内置了道具来处理自动完成与输入值的状态。

您可以在此处的文档中看到它的使用情况：https://material-ui.com/components/autocomplete/#controllable-states

在您的示例中，您可能希望将 inputChange 和 onInputChange 道具添加到自动完成组件。这些将通过传递给 renderInput 函数的参数传递给您的 TextField。

因此，您的最终代码将类似于从链接文档中复制的以下代码段：

<Autocomplete
  value={value}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
  inputValue={inputValue}
  onInputChange={(event, newInputValue) => {
    setInputValue(newInputValue);
  }}
  id="controllable-states-demo"
  options={options}
  style={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Controllable" variant="outlined" />}
/>

使用 Material UI 响应自动完成

1 个答案: