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>元素

您需要通过为其指定一个由状态控制的值来将您的选择元素转换为受控组件。然后，使handleFocus函数重置该状态变量。

例如：

＆＃13;

＆＃13;

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"));

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

清除不受控制的 <select>元素

如果你想让DOM管理select元素，你可以在触发focus事件时清除值。

＆＃13;

＆＃13;

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"));

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;