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

记下更多问题：）

单击“自动完成材料UI”按钮时如何删除所选值？

1 个答案: