自动填充 - 如何设置默认值？

Question

有谁知道如何将默认值添加到自动完成组件？该组件有一个dataSource,我想加载已经选择的特定项目的页面(例如,用所选项目的文本填充文本字段,并且已经设置了它的值).

有谁知道怎么样？非常感谢任何帮助<3

Answer 1

您可以通过在 中设置适当的状态来实现这一点componentDidMount，例如：

componentDidMount() {
    // load your items into your autocomplete

    // set your default selected item
    this.setState({ allItems: [itemYouWantToSet], selectedItem: item.name, selectedItemId: item.id }
}

render() {
    return (
		<Autocomplete
		    value={this.state.selectedItem}
		    items={this.state.allItems}
		    getItemValue={(item) => item.name}
		    onSelect={(value, item) => {
		        this.setState({ selectedItem: value, selectedItemId: value, allItems: [item] });
		    }}
		/>
    )
}

然后您的项目在加载时从可用选项列表中正确选择。

Answer 2

您可以提供defaultValueAutoComplete 的 prop。

<Autocomplete
    multiple
    id="tags-outlined"
    options={this.state.categories}
    getOptionLabel={(option) => option.category_name}
    onChange={this.handleAutocomplete}
    defaultValue={'yourDefaultStringValue'} //put your default value here. It should be an object of the categories array.
    filterSelectedOptions
    renderInput={(params) => (
        <TextField
            fullWidth
            {...params}
            variant="outlined"
            label="Add Categories"
            placeholder="Category"
            required        
        />
    }
/>

Answer 3

我尝试了上述所有解决方案，但没有任何效果。也许从那时起 API 发生了变化。

我终于想出了一个解决方案。它不是那么优雅，但原则上它是有道理的。在我的情况下，选项是对象。我只需要使用我的选项数组中的确切项目来设置“值”道具。这样就不需要 componentDidMount 和 getOptionSelected。

在我们的例子中，自动完成被包裹在另一个组件中。这是主要代码：

class CTAutoComplete extends React.PureComponent {

  getSelectedItem(){
    const item = this.props.options.find((opt)=>{
      if (opt.value == this.props.selectedValue)
        return opt;
    })
    return item || {};
  }

  render() {
    return (
        <Autocomplete
            id={this.props.id}
            className={this.props.className}
            style={{ width: '100%' }}
            options={this.props.options}
            getOptionLabel={this.props.getOptionLabel}
            renderInput={params => (
                <TextField {...params} label={this.props.label} variant="outlined" />
            )}
            onChange={this.props.onChange}
            value={this.getSelectedItem()}
        />
    );
  }
}

重要提示：在设置“value”时，您必须确保放置空情况“ || {} ”，否则 React 会抱怨您正在从不受控制的组件更改为受控制的组件。

Answer 4

这种方法对我有用（使用钩子）：

首先在变量中定义您需要的选项：

const genderOptions = [{ label: 'M' }, { label: 'V' }];

其次，您可以定义一个钩子来存储所选值（例如，将其存储在会话存储中以供页面刷新时使用，或直接使用 useState）：

const age = useSessionStorage('age', '');

接下来，您可以按如下方式定义自动完成（请注意 value 和 getOptionLabel 中的默认值，如果省略这些值，您将收到受控警告）：

  <Autocomplete
    id="id"
    options={ageOptions}
    getOptionLabel={option => option.label || ""}
    value={ageOptions.find(v => v.label === age[0]) || {}} // since we have objects in our options array, this needs to be a object as well
    onInputChange={(_, v) => age[1](v)}
    renderInput={params => (
      <TextField {...params} label="Leeftijd" variant="outlined" />
    )}
  />

Answer 5

您可以使用该searchText财产。

<AutoComplete searchText="example" ... />