如何清除 MUI 自动完成中的文本？

Question

我有一个 Autocomplete 字段，它使用：

searchText = {this.state.searchText}

像这样；

<AutoComplete
  floatingLabelText='agent input'
  ref='agentInput'
  hintText="type response"
  multiLine = {true}
  fullWidth = {true}
  searchText = {this.state.searchText}
  onNewRequest={this.sendAgentInput}
  dataSource={this.agentCommands}
/>

但是当我更新 this.setState({searchText: null }) 它会清除一次自动完成，但不会清除第二次。

不确定这是错误还是有其他方法可以重置该字段。

我也尝试寻找字段并添加 ref 但没有成功。

在此处归档以防出现错误 https://github.com/callemall/material-ui/issues/2615

Answer 1

也尝试在每次输入更新时更改 searchText：

onUpdateInput={this.handleUpdateInput}

每当用户更改输入时，此函数应更改 searchText：

handleUpdateInput(text) {
  this.setState({
    searchText: text
  })
}

我的代码如下所示 (ES6)：

class MyComponent extends Component {
  constructor (props) {
    super(props)

    this.dataSource = ['a', 'b' ,'c']
    this.state = {
        searchText: ''
    }

  }

  handleUpdateInput (t) { this.setState({ searchText: t }) }

  handleSelect (t) { this.setState( { searchText: '' }) }

  render () {
    return <AutoComplete dataSource={this.dataSource}
                         searchText={this.state.searchText}
                         onNewRequest={this.handleSelect.bind(this)}
                         onUpdateInput={this.handleUpdateInput.bind(this)}
    />
  }      
}

这里我想在用户按下回车键或从列表中选择某些项目时清除输入（所以我在 handleSelect 中清除 searchText）但我也在每次输入更新时更改 searchText 的状态 (handleUpdateInput).

希望对你有用！

Answer 2

试试这个：

this.setState({ searchText: "\r" });

因为我认为函数应该测试字符串的长度（BUG？）

Answer 3

对于freesolo Autocomplete，可以控制Autocomplete的inputValue，按需设置为空串：

const [inputValue, setInputValue] = React.useState('');

return (
  <>
    <Button onClick={() => setInputValue('')}>clear input</Button>
    <Autocomplete
      freeSolo
      inputValue={inputValue}
      onInputChange={(_, v) => setInputValue(v)}
      options={top100Films}
      renderInput={(params) => <TextField {...params} label="Movie" />}
    />
  </>
);

如果您还想更改当前选中的值，而不仅仅是输入框中的值：

const [inputValue, setInputValue] = React.useState('');
const [value, setValue] = React.useState(null);

return (
  <>
    <Button
      onClick={() => {
        setInputValue('');
        setValue(null);
      }}
    >
      clear input
    </Button>
    <Autocomplete
      freeSolo
      value={value}
      onChange={(_, v) => setValue(v)}
      inputValue={inputValue}
      onInputChange={(_, v) => setInputValue(v)}
      options={top100Films}
      renderInput={(params) => <TextField {...params} label="Movie" />}
    />
  </>
);

如何清除 MUI 自动完成中的文本？

How to clear the text in a MUI Autocomplete?

reactjs

material-ui