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

【问题标题】：How to clear the text in a MUI Autocomplete?如何清除 MUI 自动完成中的文本？
【发布时间】：2016-03-27 01:28:42
【问题描述】：

我有一个 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

【问题讨论】：

你可以为此添加一个小提琴吗？

标签： reactjs material-ui

【解决方案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)。

希望对你有用！

【讨论】：

几个月前，但感谢您的回复！我去看看。
这不起作用，因为他们添加了关闭菜单超时
使用新的 menuCloseDelay 属性，当清除 searchText 的延迟等于默认值（300 或您为延迟设置的任何值）时，另一种方法是 setTimeout。
任何对 /why/ 感兴趣的人都需要 onUpdateInput 处理程序。 state.searchText 是 ''。它永远不会改变 - 您在框中输入文本/进行选择，并且道具会更新。然后您尝试触发状态更改/文本重置为''，但它已经是那个值。所以，什么也没有发生。上面的onUpdateInput 处理程序确保组件的 state.searchText 跟踪当前输入值。然后，当您设置为'' 时，会检测到更改并实际执行。
在文档中定义 <Autocomplete/> 时没有像 searchText 这样的道具或任何提及的东西。也许你指的是任何等效的可用

【解决方案2】：

试试这个：

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

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

【讨论】：

【解决方案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" />}
    />
  </>
);

【讨论】：