reactjs - 单击“自动完成材料UI”按钮时如何删除所选值？(How to remove selected value when click button of Autocomplete Material UI?)

Question

I'm using autocomplete of material-ui, and trying to delete selected value whenever click a button but can not find any way to do that.

(我正在使用material-ui的自动完成功能，并试图在单击按钮时删除选定的值，但找不到任何方法。)

Any idea?

(任何的想法？)

            <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>```

  ask by randomguy translate from so

Answer 1

You will need to set the value(a state) and the onChange event at Autocomplete:) when you click the rest button it will just reset the state :)

(您需要在自动完成时设置值（一个状态）和onChange事件：）单击其余按钮时，它将仅重置状态：）)

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

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

I made a working demo for you: https://codesandbox.io/s/material-demo-zqz4v

(我为您制作了一个工作演示： https : //codesandbox.io/s/material-demo-zqz4v)

Comment down for more questions :)

(评论下来以获取更多问题:))