ReactJS - Очистить выбор значения в фокусе

Question

Мне нужно очистить выбранное значение выпадающего списка, как только пользователь сфокусируется на элементе выбора. Я использовал приведенный ниже код, но не могу понять, какое свойство select мне нужно сбросить.

<select name="select1" onChange={this.onChangeOption} onFocus={this.handleFocus}>
    <option value=''>Please select...</option>
    <option value='A'>A</option>
    <option value='B'>B</option>
    <option value='C'>C</option>
    <option value='D'>D</option>
</select>

handleFocus(event) {
    event.target.select(); // it did not work!!
}

Я хочу, чтобы выбранное значение было Please select... когда пользователь фокусируется на элементе.

Answer 1

Одна из проблем с вашим элементом select заключается в том, что он не является ни контролируемым, ни неконтролируемым элементом ввода. То, чего вы хотите достичь, можно сделать обоими методами, и похоже, что вы пытались создать контролируемый компонент.

Я предоставлю решение для обоих:

---

Очистка контролируемого <select> элемент

Вам нужно превратить ваш элемент select в контролируемый компонент, присваивая ему значение, которое контролируется состоянием. Затем сделайте ваш handleFocus функция сбрасывает эту переменную состояния.

Например:

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {select: ''};
  }
  
  onChangeOption = (event) => {
    this.setState({select: event.target.value});
  }
  
  handleFocus = (event) => {
    this.setState({select: ''});
  }
 
  render() {
    return (
      <select name="select1" value={this.state.select} onChange={this.onChangeOption} onFocus={this.handleFocus}>
        <option value=''>Please select...</option>
        <option value='A'>A</option>
        <option value='B'>B</option>
        <option value='C'>C</option>
        <option value='D'>D</option>
    </select>
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

---

Очистка неконтролируемого <select> элемент

Если вы хотите, чтобы DOM управлял элементом select, вы можете сделать следующее, чтобы очистить значение всякий раз, когда focus событие запущено.

class MyApp extends React.Component {
  
  handleFocus = (event) => {
    event.target.value = '';
  }
 
  render() {
    return (
      <select name="select1" onFocus={this.handleFocus}>
        <option value=''>Please select...</option>
        <option value='A'>A</option>
        <option value='B'>B</option>
        <option value='C'>C</option>
        <option value='D'>D</option>
    </select>
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>