ReactJS - 清除焦点上的选择值

Question

我需要在用户专注于select元素时立即清除选择下拉列表的选定值。我使用了下面的代码，但无法确定我需要重置的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>