Question

当倍数为true时，我喜欢Chip选项。当倍数为false时，是否还可以启用Chip？

<Autocomplete
                className={classes.search}
                options={top100Films}
                getOptionLabel={(option) => option.title}
                multiple={false}
                renderInput={(params) =>
                    <TextField {...params}
                        variant="outlined"
                        label="Customer's journey"
                        helperText="Search by: program"
                    />}
            />

谢谢

Answer 1

否，不幸的是，您必须将Autocomplete更改为受控组件，然后通过startAdornment上的Input道具自行完成。像这样：

function MyAutocomplete() {
  const [value, setValue] = useState(null);

  const chip = value ? 
    <Chip label={value.title} onDelete={() => setValue(null)} size="medium" /> 
    : undefined;
  
  return (
    <Autocomplete
        size="medium"
        options={top100Films}
        getOptionLabel={(option) => option.title}
        onChange={(event, newValue) => setValue(newValue)}
        value={value}
        renderInput={(params) => (
          <TextField
            {...params}
            InputProps={{
              ...params.InputProps,
              startAdornment: chip
            }}
            variant="outlined"
            label="Customer's journey"
            helperText="Search by: program"
          />)}
     />);
}

Demo here

倍数为假时自动完成筹码

1 个答案: