Semantic下拉列表:您能动态地设置值吗？
Semantic下拉列表:您能动态地设置值吗？
提问于 2022-01-01 19:15:39
我正在使用semantic-ui-react的下拉列表。语义-ui下拉列表位于我的Artists组件中，该组件正在使用它的父组件App。
现在，下拉列表运行良好，如果您从下拉列表中选择一个名称(艺术家)，那么将调用handleArtistSelection函数，并将该艺术家的名字传递给它。大部分代码如下所示。
但是，还有其他方法来设置下拉列表的值吗？例如，在jquery中，可以使用：
$("#mydropdownlist").val("thevalue").change();App组件
export default function App() {
const handleArtistSelection = (artist) => {
...
};
const artistOptions = artistArray.map((artist) => { return {text: artist, value: artist} });
return (
<div className="App">
<h1>Explore Music Award Show Winners</h1>
<Artists options={artistOptions} onArtistChange={handleArtistSelection} placeholder={'Pick an artist'}/>
</div>
)
}艺术家部分：
import {Dropdown} from 'semantic-ui-react';
export default function Artists (props) {
const handleOnChange = (e, data) => {
props.onArtistChange(data.value);
}
return(
<Dropdown placeholder={props.placeholder} search selection options={props.options} onChange={handleOnChange}/>
)
}回答 1
Stack Overflow用户
发布于 2022-11-09 01:07:55
useRef怎么样，并直接在参考文件上调用setState。
const countryOptions = [
{ key: "af", value: "af", flag: "af", text: "Afghanistan" },
{ key: "ax", value: "ax", flag: "ax", text: "Aland Islands" },
{ key: "al", value: "al", flag: "al", text: "Albania" },
{ key: "dz", value: "dz", flag: "dz", text: "Algeria" }
];
const DropdownExampleSearchSelection = () => {
const ref = React.useRef(null);
const handleClick = () => {
ref.current.setState({ value: "dz" });
};
return (
<>
<Dropdown
ref={ref}
placeholder="Select Country"
fluid
search
selection
options={countryOptions}
/>
<hr />
<Button type="button" onClick={handleClick}>
Select Algeria
</Button>
</>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70551243
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号