Question

有谁知道如何向默认值组件添加默认值？该组件有一个dataSource，我想加载已经选择了特定项目的页面（例如，在文本字段中填入所选项目的文本，并且＆＃39; s值已设置）。

有谁知道怎么做？非常感谢任何帮助＆lt; 3

Answer 1

我尝试了上述所有解决方案，但没有任何效果。此后，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()}
        />
    );
  }
}

重要提示：设置“值”时，必须确保将空大小写为“ || {}”，否则React抱怨您正在从不受控制的组件更改为受控制的组件。

Answer 2

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

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

struct goods {
    char name[20];
    union quantity {
        int count;
        float weight, volume;
    } q;
};

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

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

接下来，您可以按以下方式定义“自动完成”（注意value和getOptionLabel中的默认值，如果忽略这些默认值，则会将这些内容控制为不受控制的警告）：

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

Answer 3

您可以为AutoComplete提供defaultValue属性。

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

Answer 4

onUpdateInput为我工作-适用于像我一样浏览所有这些内容的人

Answer 5

您可以使用searchText属性。

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

Answer 6

试试这个......

componentWillReceiveProps(nextProps) {
    let value = nextProps.value
    if (value) {
      this.setState({
        value: value
      })
    }
  }

Answer 7

像这样调用您的组件

<SelectCountryAutosuggest searchText="My Default Value" />

确保在类加载

上应用默认值

class SelectCountryAutosuggest extends React.Component {
  state = {
    value: this.props.searchText, //apply default value instead of ''
    suggestions: [],
  };
...
}

Answer 8

您可以通过在class Picker extends React.Component { state = { resourcePickerOpen: false, } ... }中设置适当的状态来实现此目的，例如：

componentDidMount

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

Answer 9

如果您正在使用在每个过滤器上加载 API 的过滤器选项，这会特别棘手。我能够通过在 state 和 onInputChange 选项中设置来加载初始值。

下面是对我有用的代码，或者点击下面的链接查看完整的工作演示。

https://codesandbox.io/s/smoosh-brook-xgpkq?fontsize=14&hidenavigation=1&theme=dark

import React, { useState, useEffect } from "react";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function CreateEditStrategy({ match }) {
  const [user, setUser] = useState({
    _id: "32778",
    name: "Magic User's Club!"
  });
  const [filter, setFilter] = useState("");
  const [users, setUsers] = useState([]);
  const [openAutoComplete, setOpenAutoComplete] = React.useState(false);

  useEffect(() => {
    (async () => {
      //Will not filter anything for testing purpose
      const response = await fetch(
        `https://api.tvmaze.com/search/shows?q=${filter}`
      );
      const shows = await response.json();

      setUsers(
        shows.map((a, i) => {
          return { _id: a.show.id, name: a.show.name };
        })
      );
    })();
  }, [filter]);
  return (
    <div>
      <Typography variant="h6">Autocomplete</Typography>
      <Autocomplete
        open={openAutoComplete}
        onOpen={() => setOpenAutoComplete(true)}
        value={user}
        inputValue={filter}
        onClose={() => setOpenAutoComplete(false)}
        onChange={(event, user) => {
          if (user) setUser(user);
          else setUser({ _id: "", name: "" });
        }}
        onInputChange={(event, newInputValue) => setFilter(newInputValue)}
        getOptionSelected={(option, value) => option.name === value.name}
        getOptionLabel={(option) => option.name}
        options={users}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Asynchronous"
            variant="outlined"
            InputProps={{
              ...params.InputProps
            }}
          />
        )}
      />
    </div>
  );
}

Answer 10

您是否尝试动态设置searchText道具？您可以将要设置的值作为searchText道具传递给自动填充组件。像，

＆＃13;

<Autocomplete
  searchText={this.state.input.name} // usually value={this.state.input.name}
/>

＆＃13;

默认情况下，它会将初始值设置为TextField组件的Autocomplete，但是当用户进行任何修改时，它会调出自动填充选项，具体取决于{{ 1}} prop。

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

10 个答案: