Question

如果选择了某个选项后，如何阻止<select>元素自动关闭它的下拉菜单，即即使选择完成后我想保持选项下拉列表打开。

我已尝试在event.stopPropagation()的{{1}}处理程序中调用event.preventDefault()和onChange，但都没有效果。

Here是基本组件的小提琴。我想实现上面描述的功能。

编辑：我尝试将<select>（如可能的dulicate中所述）应用于stopPropagation()的点击处理程序，但这也不起作用。对我来说，似乎可能有一种特定于React的方法来处理这种情况。

Answer 1

根据this answer，使用原生<select>元素并不可能 - 至少不像你期望的那样。所以我看到了几种可能性：

使用无序列表或任何其他非表单元素创建“假”下拉菜单，如the answer that Jon Uleis pointed out in the comment above中所示。
如果您仍然希望使用原生<select>元素，则slightly hacky approach需要在size上设置元素的change属性（并可选择在blur上删除它。

以下是React中可能的样子的简短示例：

＆＃13;

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isFocused: false };

    this.handleChange = this.handleChange.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
  }

  handleChange(e) {
    this.setState({ isFocused: true });
  }

  handleBlur(e) {
    this.setState({ isFocused: false });
  }

  render() {
    return (
      <select
        onChange={this.handleChange}
        onBlur={this.handleBlur}
        size={this.state.isFocused
          ? this.props.options.length
          : false}>
        {this.props.options.map((option, index) => (
          <option key={option}>{option}</option>
        ))}
      </select>
    );
  }
}

const options = [
  'This should “stay open”',
  'on change.',
  'It should also “collapse”',
  'on blur.'
];

ReactDOM.render(
  <Hello options={options} />,
  document.getElementById('root')
);

＆＃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="root"></div>

＆＃13;

在React中防止关闭选择的选择输入

1 个答案: