javascript - 清除 data-reactjs 后如何在输入字段中设置光标

Question

我正在尝试清除输入字段并使光标聚焦在同一输入字段上。我尝试使用 .focus() 和自动对焦功能，但仍然无法获取值。

resetInput = () => {
  this.setState({ search: '' });
}

render() {
  return (
    <div className="storyboard-search-box clearfix">
      <input type="text" placeholder="Search..." value={this.state.search} onChange={this.searchBoard} />
      <button className="clear-search-button">
        <img src={clearIcon} alt="clear button" title="Clear All" onClick={this.resetInput}/>
      </button>
    </div>
  );
}

Answer 1

您可以存储input的ref，并对其调用focus方法。

示例

class App extends React.Component {
  state = {
    search: ""
  };

  searchBoard = e => {
    this.setState({ search: e.target.value });
  };

  resetInput = () => {
    this.setState({ search: "" });
    this.ref.focus();
  };

  componentDidMount() {
    setTimeout(this.resetInput, 2000);
  }

  render() {
    return (
      <div>
        <input
          type="text"
          placeholder="Search..."
          value={this.state.search}
          onChange={this.searchBoard}
          ref={ref => (this.ref = ref)}
        />
      </div>
    );
  }
}