单击自动完成材料 UI 的按钮时如何删除选定的值？

Question

我正在使用 material-ui 的自动完成功能，并在单击按钮时尝试删除选定的值，但找不到任何方法来执行此操作。任何的想法？

            <Autocomplete
              className={classes.techListBox}
              disableCloseOnSelect={true}
              multiple
              options={this.props.displayProject.techList}
              getOptionLabel={options => options.title}
              defaultValue={this.props.displayProject.techName}
              onChange={(e, techs) => {
                this.formatTechID(techs);
              }}
              renderInput={params => (
                <TextField
                  {...params}
                  variant="outlined"
                  placeholder={t("tech")}
                  margin="normal"
                  fullWidth
                />
              )}
            ></Autocomplete>```

Answer 1

您需要在自动完成时设置值（状态）和 onChange 事件:) 当您单击其余按钮时，它只会重置状态:)

   const [value, setValue] = React.useState(null);
   <Autocomplete 
    value={value}
    onChange={(event, newValue) => {
      setValue(newValue);
    }}
   >

   <button onClick={() => setValue(null)}>Reset autocomplete</button>

我为你做了一个工作演示：https : //codesandbox.io/s/material-demo-zqz4v

评论更多问题:)