onclick 后清除搜索框

Question

我的标题中有一个搜索框。我可以在搜索后清除我的状态，但输入没有被清除。

我纯粹是使用搜索框来生成一个下拉列表，其中包含指向其各自字段的链接。所以输入字段纯粹是用来模拟搜索的

我尝试使用 refs 来定位它，但当我最终达到该值时，我无法再使用搜索了。

SearchBarHeader、SearchBox 和 SearchField 都有一个 ref。但我不确定这是否是正确的方法。

  clearSearchBar = () => {
    this.searchBarHeader.current.searchBox.current.searchField.current.value = '';
  };

以及搜索框的代码。

class Search extends Component {
  state = {
    organisationNames: [],
    errorMessage: null,
  };

  searchField = React.createRef();

  async componentDidMount() {
    const organisations = await getSearch();
    this.setState({
      organisationNames: organisations,
    });
  }

  searchHandler = (e) => {
    const searchValue = e.target.value.toLowerCase();
    if (!searchValue) {
      this.props.clearSearchResult();
    } else {
      const result = this.state.organisationNames.filter((organisationName) => {
        return organisationName.toLowerCase().includes(searchValue);
      });
      this.props.setSearchResult(result, () => {
        if (this.props.searchResult.length === 0) {
          this.setState({
            errorMessage: "No Results...",
          });
        } else {
          this.setState({
            errorMessage: null,
          });
        }
      });
    }
  };

  clearSearchInput = () => {
    this.props.clearSearchResult();
  };

  render() {
    return (
      <div className="search">
        <div className="form-group">
          <input
            ref={this.searchField}
            type="search"
            placeholder="Search for company"
            onChange={this.searchHandler}
          />
        </div>
        <div className="search-result-wrapper">
          <ul className="search-results">
            {this.props.searchResult === undefined ? (
              <Skeleton />
            ) : (
              this.props.searchResult.map((res, id) => {
                return (
                  <Link
                    key={id}
                    to={"/r/" + res}
                    onClick={this.clearSearchInput}
                  >
                    <li className="search-item">{res || <Skeleton />} </li>
                  </Link>
                );
              })
            )}
            {this.state.errorMessage === null ? (
              ""
            ) : (
              <li>{this.state.errorMessage}</li>
            )}
          </ul>
        </div>
      </div>
    );
  }
}

export default Search;

Answer 1

在我看来，您的输入缺少“值”属性，这使它对您的状态变化作出反应。从 react docs 中获取一个示例，这是理想的设置：

this.state = {value: ''};
(...)
handleChange(event) {
    this.setState({value: event.target.value});
}
(...)
<input type="text" value={this.state.value} onChange={this.handleChange} />

按照上面的方法，你将不需要使用 refs 手动清除输入值。提交表单后，您可以简单地清除您的状态...

this.setState({value: ''});

...您的输入应该被清除。

这是文档的链接：https://reactjs.org/docs/forms.html

Answer 2

您正在清除 ref，而不是状态。您的输入也没有附加值，因此即使状态被清除，它也不会反映。

您当然可以使表单数据更加动态，而无需设置和保持companyName 不变。

这是一个简单的工作示例：https://codesandbox.io/s/flamboyant-voice-oj85u?file=/src/App.js

export default function App() {
  const [formData, setFormData] = useState({ companyName: "" });

  const handleChange = (e) => {
    setFormData({ companyName: e.target.value });
  };

  const handleClear = () => {
    setFormData({ companyName: "" });
  };

  return (
    <div className="search">
      <div className="form-group">
        <input
          type="search"
          name="companyName"
          value={formData.companyName}
          placeholder="Search for company"
          onChange={handleChange}
        />
        <button onClick={handleClear}>Clear</button>
      </div>
      <pre>{JSON.stringify(formData, null, 2)}</pre>
    </div>
  );
}