清除MaterialUI搜索过滤器TextField并返回默认值

要清除Material UI搜索过滤器TextField并返回默认值，可以在TextField组件上使用ref属性，并使用该引用来访问TextField组件的函数。 然后，在清除搜索过滤器TextField值后，调用该函数将其设置回默认值。

示例代码：

import React from 'react';
import TextField from '@material-ui/core/TextField';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.searchInput = React.createRef();
    this.state = {
      searchValue: '',
    };
  }

  handleClearSearch = () => {
    this.setState({
      searchValue: '',
    });
    this.searchInput.current.value = ''; // 清除TextField的输入
    this.searchInput.current.focus(); // 重新聚焦TextField
  };

  handleChangeSearch = event => {
    this.setState({
      searchValue: event.target.value,
    });
  };

  render() {
    return (
      <div>
        <TextField
          inputRef={this.searchInput}
          label="Search"
          value={this.state.searchValue}
          onChange={this.handleChangeSearch}
        />
        <button onClick={this.handleClearSearch}>Clear</button>
      </div>
    );
  }
}

当用户单击Clear按钮时，handleClearSearch函数将首先清除搜索值和TextField的输入值，并且不会更新状态。然后它会使用current属性重新获取TextField的引用，将输入聚焦到TextField。注意，此代码假定在使用当前版本的Material UI @ 4.11.4。