ReactJS - 清除焦点上的 select 值

Question

我需要在用户关注 select 元素时立即清除 select 下拉列表的 selected 值。我使用了以下代码，但无法弄清楚 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!!
}

我希望当用户关注元素时 selected 值是 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>