javascript defaultValue选项未在自动完成下拉列表中选择默认值

ipakzgxi  于 2024-01-05  发布在  Java
关注(0)|答案(2)|浏览(112)
stateNPAValue[formData.state.vale] = 0: "All",1: "959", 2: "203",3: "860", 4: "475" // API response for NPA data

const [selectedNamesState, setSelectedNamesState] = useState([]);

const transformedNpaData = stateNPAValue[formData.state.value].map((label, index) => ({
    label,
    value: index.toString()  // You can use the index as the value or any unique identifier
  }));

<Autocomplete
                multiple
                id="fixed-tags-demo"
                name="Npa"
                value={selectedNamesState}
                onChange={(event, newValue) => {
                  setSelectedNamesState(newValue)
                  NPAHandler(newValue);
                  changeHandleStateErrorRemove(event)
                }}                
                options={transformedNpaData}
                getOptionLabel={(option) => option.label.replace(/[\[\]']+/g, '')}
                defaultValue={[transformedNpaData[0].label]}
                renderTags={(tagValue, getTagProps) =>
                  tagValue.map((option, index) => (
                    <Chip
                      label={option.label.replace(/[\[\]']+/g, '')}
                      {...getTagProps({ index })}
                    />
                  ))
                }
                style={{ width: 500 }}
                renderInput={(params) => <TextField {...params} label={formData.state.value} />}
                isOptionEqualToValue={(option, value) => {
                  return option.value === value.value;
                }}
              />

字符串
我想选择“全部”作为默认值在多选框中,但defaultValue选项不起作用。请让我知道这段代码有什么问题。

afdcj2ne

afdcj2ne1#

看起来你的Autocomplete组件和你的props期望的数据类型如下,你给options prop一个正确的类型。我认为defaultValue也应该是相同的类型

interface AutocompleteOption {
  label: string;
}

字符串
所以我认为改变默认值如下将解决这个问题。

// ...

<Autocomplete
    // ...
    defaultValue={[transformedNpaData[0]]}
    // ...
/>

zaq34kh6

zaq34kh62#

您正在使用受控输入呈现自动完成。在这种情况下,您必须在useState中设置默认值,该值控制自动完成的选定值。阅读此处的文档。这是文档中所写的内容:
defaultValue:默认值。当组件不受控制时使用。
考虑到选项All将始终位于列表的顶部。您可以如下初始化selectedNumbers State:

const [selectedNamesState, setSelectedNamesState] = useState([
  {
    label: "All",
    value: "0",
  },
]);

字符串
你的选项数组在对象数组中,如果你习惯于将它转换为字符串数组,那么解决方案可以更简单。

import { Autocomplete, Chip, TextField } from "@mui/material";
import { useState } from "react";

const someKey = "someKey";
const stateNPAValue = {
  [someKey]: ["All", "959", "203", "860", "475"],
};

function App() {
  const [selectedNamesState, setSelectedNamesState] = useState(["All"]);

  const transformedNpaData = stateNPAValue[someKey];

  return (
    <div className="App">
      <Autocomplete
        multiple
        id="fixed-tags-demo"
        name="Npa"
        value={selectedNamesState}
        onChange={(event, newValue) => {
          setSelectedNamesState(newValue);
        }}
        options={transformedNpaData}
        getOptionLabel={(option) => {
          return option.replace(/[[\]']+/g, "");
        }}
        // defaultValue={[transformedNpaData[0].label]}
        renderTags={(tagValue, getTagProps) =>
          tagValue.map((option, index) => (
            <Chip
              key={option}
              label={option.replace(/[[\]']+/g, "")}
              {...getTagProps({ index })}
            />
          ))
        }
        style={{ width: 500 }}
        renderInput={(params) => <TextField {...params} label="test" />}
      />
    </div>
  );
}

export default App;

相关问题