javascript - React JS Material UI 自动完成 : Change Options

Question

我想为我的 React JS 项目使用自动完成字段。对于 UI 的设计，我使用 Material UI。在文档中，您可以看到以下示例:

<Autocomplete
                    required
                    id="combo-box-demo"
                    filterOptions={(x) => x}
                    value={this.state.departure}
                    options={top100Films}
                    getOptionLabel={(option) => option.title}
                    renderInput={(params) => <TextField {...params} label="Startpunkt" variant="outlined" />}
                />

选项对象具有以下默认值:

let top100Films = [
        { title: 'The Shawshank Redemption', year: 1994 },
        { title: 'Monty Python and the Holy Grail', year: 1975 },
    ];

出于我的目的，我想动态更改选项，因为我使用 Rest API 来获取输入结果。因此，我的问题是如何在用户键入时动态更改选项。

Answer 1

您可以在您的情况下使用 onInputChange Prop :

      <Autocomplete
            required
            id='combo-box-demo'
            filterOptions={(x) => x}
            value={this.state.departure}
            options={top100Films}
            getOptionLabel={(option) => option.title}
            onInputChange={(event: object, value: string, reason: string) => {
              if (reason === 'input') {
                changeOptionBaseOnValue(value);
              }
            }}
            renderInput={(params) => (
              <TextField {...params} label='Startpunkt' variant='outlined' />
            )}
          />

然后您可以定义 changeOptionBaseOnValue 来处理您的选项。