Question

在一个 React 项目中，我有一个 Autocomplete 组件，它在下拉列表中显示了国家/地区名称及其相关调用代码。在列表中选择时呈现所需的数据，但刷新时，数据为空且不显示默认数据。

const [newValue, setNewValue] = useState({});
const [textToggle, textToggleState] = useState(false);

render(
        <div
          style={{ cursor: "pointer" }}
          onClick={() => {
            textToggleState(!textToggle);
          }}
        >
          <h5>+{newValue == null ? "91" : newValue.calling_code}</h5> {/* <-- Value gets null when refreshed */}

        </div>
        {textToggle ? (
          <Autocomplete
            id="size-small-standard"
            size="small"
            options={cities}
            onChange={(event, value) => {
              setNewValue(value);
              textToggleState(!textToggle);
            }}
            autoSelect={true}
            getOptionLabel={(option) =>
              `${option.country}` + `+ ${option.calling_code}`
            }
            renderOption={(option) => (
              <>{`${option.country} + ${option.calling_code}`}</>
            )}
            //defaultValue={cities[98]}
            style={{ width: "100%" }}
            renderInput={(params) => (
              <TextField
                {...params}
                variant="standard"
                placeholder="Search your country"
                style={{ width: "40%" }}
              />
            )}
          />
        ) : (
          ""
    )}
)

以下是 CodeSandbox 链接：https://codesandbox.io/s/how-to-add-only-single-value-from-autocomplete-in-material-ui-forked-tu218

Answer 1

您可以使用 newValue 将 value prop 传递给自动完成组件。但是 newValue 默认情况下是一个空对象，它在您传递给自动完成的选项数组中不存在，因此在默认情况下它将显示 undefined + undefined 。您可以设置为 null 并在自动完成本身中添加 null 检查，或者您可以直接在 useState 中分配一个值，因此当您检查 null 并使用 91 代码时，您可以将该值分配给newValue 本身直接。检查下面的代码我在这里添加了值字段

        <Autocomplete
            id="size-small-standard"
            size="small"
            options={cities}
            value={newValue !== null ? newValue : cities[98]}
            onChange={(event, value) => {
              setNewValue(value);
              textToggleState(!textToggle);
            }}
            autoSelect={true}
            getOptionLabel={(option) =>
              `${option.country}` + `+ ${option.calling_code}`
            }
            renderOption={(option) => (
              <>{`${option.country} + ${option.calling_code}`}</>
            )}
            //defaultValue={cities[98]}
            style={{ width: "100%" }}
            renderInput={(params) => (
              <TextField
                {...params}
                variant="standard"
                placeholder="Search your country"
                style={{ width: "40%" }}
              />
            )}
          />

或者你可以直接将 newValue 传递给 value 字段并在 newValue useState 中分配默认值，如下所示

const [newValue, setNewValue] = useState(cities[98]);
.
.
.
.
<Autocomplete
            id="size-small-standard"
            size="small"
            options={cities}
            value={newValue}
            onChange={(event, value) => {
              setNewValue(value);
              textToggleState(!textToggle);
            }}
            autoSelect={true}
            getOptionLabel={(option) =>
              `${option.country}` + `+ ${option.calling_code}`
            }
            renderOption={(option) => (
              <>{`${option.country} + ${option.calling_code}`}</>
            )}
            //defaultValue={cities[98]}
            style={{ width: "100%" }}
            renderInput={(params) => (
              <TextField
                {...params}
                variant="standard"
                placeholder="Search your country"
                style={{ width: "40%" }}
              />
            )}
          />

如何在自动完成材质 UI 中设置默认值？

1 个答案: