材质 UI 修剪文本搜索

Question

我想修剪在自动完成 UI 中输入的文本以使搜索成功。 如果我搜索文本“fath”，它应该显示搜索关键字“fath”的结果。

https://material-ui.com/components/autocomplete/

Answer 1

您可以使用 value 和 onChange 道具来实现这一点 - 请查看您链接的文档中的 Controlled States section。

您可以对 onChange 方法建模以在接收到用户输入时修剪输入（如果单词之间出现空格，这可能会导致问题），或者您可以在 API 调用中使用之前修剪输入值或任何。 Javascript Trim method for strings 可以轻松地为您调整价值。

// Sample onChange handler
// Beware - this might block spaces from between words
onInputChange = (ev) => {
    this.setState({ inputValue : ev.target.value.trim() })
}

// Better way might be to trim right before using
callToSearch = () => {
    const { inputValue} = this.state;
    console.log(inputValue.trim());
}