[英]How to clear <Input type=“select”> selected value in Reactstrap?
我在 Reactstrap 中有一个<select>
object,它是通过 Reactstrap 的<Input>
组件创建的。 I want to programmatically deselect a selected object within it, so I am using state to control the value of the <select>
and setting the state to be ''
(an empty string) when I want to clear the state. 但是,这具有将 select object 中的第一项设置为选中而不是取消选中的效果。
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.