javascript - 即使在 React 中修改状态后，输入也不会清除内容

Question

我有一个输入字段，旁边有一个“关闭 (x)”图标。当输入字段中的值发生变化时，我正在处理状态，一旦用户点击 Enter，我就会清除状态中的值。但是，在重新渲染之后(由于状态更改)，之前的输入仍然保留在输入字段中。

constructor(props) {
    super(props);
    this.state = {
      filterSearchQuery: null, filterSearch: null}

    this.handleSearchInput = this.handleSearchInput.bind(this);
    this.handleSearchReset = this.handleSearchReset.bind(this);
}

handleSearchInput(e) {
     //   e.preventDefault();
    let val = e.target.value;
    if (e.keyCode == 13)
      this.setState({ entries: [], filterSearchQuery: null, filterSearch: val, pageIndex: 0, hasMore: false }, this.loadEntries);
    else
      this.setState({ filterSearchQuery: val });
}

handleSearchReset(e) {
    //e.preventDefault();
    this.setState({ entries: [], pageIndex: 0, hasMore: false, filterSearchQuery: null, filterSearch: null }, this.loadEntries);
}

渲染和返回:

<input type="text" className="outline-none flex-fill pt-0_2em pb-0_2em border-white border-none bg-color-white color-black font-12px font-weight-bold opacity-0_9" value={this.state.filterSearchQuery} placeholder="Search in results." onKeyUp={(e) => this.handleSearchInput(e)} onChange={(e) => this.handleSearchInput(e)} autoFocus={true} />
{
    (this.state.filterSearchQuery && this.state.filterSearchQuery.length > 0) &&
    <div className="">
    <button type="button" className="close" aria-label="Close" onClick={this.handleSearchReset}>
        <span aria-hidden="true">&times;</span>
    </button>
 </div>
}

handleSearchReset 函数起作用并按预期设置状态。 filterSearch 和 filterSearchQuery 值均已正确设置。但是，在重新呈现后，filterSearchQuery 值仍然在输入字段中可见。我怎样才能克服这个问题或者我错过了什么？

Answer 1

由于您使用的是受控组件，只需 setting them to null不足以执行清除。相反，将它们设置为空字符串 ""。这是一个最小的完整示例:

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filterSearchQuery: "",
      filterSearch: ""
    };
    this.handleSearchInput = this.handleSearchInput.bind(this);
    this.handleSearchReset = this.handleSearchReset.bind(this);
  }

  handleSearchInput(e) {
    if (e.key === "Enter") {
      this.setState(prevState => ({
        filterSearchQuery: "",
        filterSearch: prevState.filterSearchQuery,
      }));
    }
    else {
      const {value} = e.target;
      this.setState(prevState => ({
        ...prevState,
        filterSearchQuery: value,
      }));
    }
  }

  handleSearchReset(e) {
    this.setState(prevState => ({
      filterSearchQuery: "",
      filterSearch: "",
    }));
  }

  render() {
    const {filterSearchQuery, filterSearch} = this.state;
    return (
      <div>
        <input 
          value={filterSearchQuery} 
          onKeyUp={this.handleSearchInput} 
          onChange={this.handleSearchInput} 
        />
        {filterSearchQuery &&
          <div>
            <button onClick={this.handleSearchReset}>
              <span>&times;</span>
            </button>
          </div>
        }
        {filterSearch &&
          <div>
            ...testing search for '{filterSearch}'...
          </div>
        }
      </div>
    );
  }
}

ReactDOM.createRoot(document.querySelector("#app"))
  .render(<Search />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

Hook 版本:

const Search = () => {
  const [
    filterSearchQuery,
    setFilterSearchQuery
  ] = React.useState("");
  const [filterSearch, setFilterSearch] = React.useState("");

  const handleSearchInput = e => {
    if (e.key === "Enter") {
      setFilterSearch(filterSearchQuery);
      setFilterSearchQuery("");
    }
    else {
      const {value} = e.target;
      setFilterSearchQuery(value);
    }
  };

  const handleSearchReset = e => {
    setFilterSearch("");
    setFilterSearchQuery("");
  };

  return (
    <div>
      <input
        value={filterSearchQuery} 
        onKeyUp={handleSearchInput} 
        onChange={handleSearchInput} 
      />
      {filterSearchQuery &&
        <div>
          <button onClick={handleSearchReset}>
            <span>&times;</span>
          </button>
        </div>
      }
      {filterSearch &&
        <div>
          ...testing search for '{filterSearch}'...
        </div>
      }
    </div>
  );
};

ReactDOM.createRoot(document.querySelector("#app"))
  .render(<Search />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

小备注:

• event.keyCode 已弃用。请改用 .key。
• 因为您已经在构造函数中将 this 绑定(bind)到 this.handleSearchFoo，所以在 render() 中不需要箭头函数包装器。
• 最好在所有条件句周围使用大括号，以提高可读性并避免细微错误。
• 使用destructuring可以帮助清理冗长的内容。
• 避免长水平线以提高可读性。
• 对于字符串，this.state.filterSearchQuery && this.state.filterSearchQuery.length > 0 可以简单地是 this.state.filterSearchQuery 因为与空数组不同，空字符串是假的。
• 在 JS 中始终使用 === 而不是 ==。