如何清除 Material-UI Autocomplete 中的文本？

Question

我有一个使用自动完成的字段：

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/mui/material-ui/issues/2615。

- dcsan

---

你能为这个添加一个 "fiddle" 吗？ - hazardous

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），但我也希望在每次输入更新（handleUpdateInput）时更改searchText的状态。

希望这对你有用！

- Magda Chmielewska

---

几个月前，但感谢您的回复！我会去看看。 - dcsan

自从他们添加了关闭菜单超时，这个功能就无法正常工作了。 - Moshe Simantov

通过新的menuCloseDelay属性，另一种选择是在清除搜索文本时设置一个延迟等于默认值（300或您设置的延迟）的setTimeout。 - Kevin Lee

有兴趣了解为什么需要 onUpdateInput 处理程序。state.searchText 是 ''。它从未改变过 - 你在框中输入文本/进行选择，该属性会更新。然后你尝试触发状态更改/文本重置为 ''，但它已经是那个值了。所以，什么也不会发生。上面的 onUpdateInput 处理程序确保组件的 state.searchText 跟踪当前输入值。然后当你设置为 ''，更改被检测到并实际执行。 - Kieren Johnstone

文档中定义<Autocomplete/>时没有像searchText这样的属性或任何其他内容。也许您正在引用可用的等效内容。 - pankaj

Answer 2

对于自由输入的Autocomplete，您可以控制inputValue并在需要时将其设置为空字符串：

freesolo Autocomplete

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" />}
    />
  </>
);

- NearHuscarl

Answer 3

Try this :

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

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

- kortex