如何解决如何清除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>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。