如何清除Reactstrap中的<Input type =“ select”>选择的值？

问题描述

我在Reactstrap中有一个<select>对象，它是由Reactstrap的<Input>组件创建的。我想以编程方式取消选择其中的选定对象，因此当我想清除状态时，我使用状态来控制<select>的值并将状态设置为''（空字符串） 。但是，这样做的效果是将选择对象中的第一项设置为要选择，而不是取消选择。

import React,{ useState } from 'react';
import "./styles.css";
import {Input,Button} from 'reactstrap';

export default function App() {

  const [selectedOption,setSelectedOption] = useState<string>('');

  const onChangeSelection = (e: any) => {
    setSelectedOption(e.target.value);
  }

  const clearSelection = () => {
    setSelectedOption('');
  }

  return (
    <div className="App">
      <div>
        <Input type={"select"} size='2' value={selectedOption} onChange={onChangeSelection}>
          <option value={"option1"}>Option 1</option>
          <option value={"option2"}>Option 2</option>
        </Input>
      </div>
      <div>
        <Button onClick={clearSelection}>Clear selection</Button>
      </div>
    </div>
  );
}

有一个问题的例子

如何取消选择任何选定的项目？

解决方法

添加值为空字符串的隐藏选项。

import React,{ useState } from "react";
import "./styles.css";
import { Input,Button } from "reactstrap";

export default function App() {
  const [selectedOption,setSelectedOption] = useState<string>("");

  const onChangeSelection = (e: any) => {
    setSelectedOption(e.target.value);
  };

  const clearSelection = () => {
    setSelectedOption("hidden");
  };

  return (
    <div className="App">
      <div>
        <Input
          type={"select"}
          size="2"
          value={selectedOption}
          onChange={onChangeSelection}
        >
          <option value="" hidden></option>
          <option value={"option1"}>Option 1</option>
          <option value={"option2"}>Option 2</option>
        </Input>
      </div>
      <p>
        Clicking the clear button selects option 1,instead of deselecting any
        selected item.
      </p>
      <div>
        <Button onClick={clearSelection}>Clear selection</Button>
      </div>
    </div>
  );
}