有人可以帮我解决如何在下拉列表中使用onChange(语义UI反应)。我正在阅读文档,但是,我仍然没有得到它。它确实有onChange道具。
onChange(event: SyntheticEvent, data: object)
我该如何使用它?就像,我有方法dropdownmethod()
。
编辑 - 实施建议,但它没有奏效。我认为在你的建议中,你没有绑定该功能。但是,我绑定了该功能。
onChangeFollower(event,data){
console.log("on change follower",data.text)
}
render() {
console.log("this.props",this.props)
var onChangeFollower = this.onChangeFollower.bind(this)
return (
<div>
<h2>project settings are here</h2>
<h2>Add new Member</h2>
<Dropdown onChange={onChangeFollower}
placeholder='Select Member'
fluid search selection options={arr} />
<h2>List of members</h2>
{lr}
</div>
如文档中所述,您只需要传递方法的引用,然后您将获得2个参数:
这是一个代码片段(它使用CDN但会抛出一些调试警告,所以忽略它们)
const { Dropdown } = semanticUIReact;
const languageOptions = [
{ key: 'eng', text: 'English', value: 'eng' },
{ key: 'spn', text: 'Spanish', value: 'spn' },
{ key: 'rus', text: 'Russian', value: 'Russian' },
]
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchQuery: '',
selected: null
}
}
onChange = (e, data) => {
console.log(data.value);
this.setState({ selected: data.value });
}
onSearchChange = (e, data) => {
console.log(data.searchQuery);
this.setState({ searchQuery: data.searchQuery });
}
render() {
const { searchQuery, selected } = this.state;
return (
<div>
<Dropdown
button
className='icon'
fluid
labeled
icon='world'
options={languageOptions}
search
text={searchQuery}
searchQuery={searchQuery}
value={selected}
onChange={this.onChange}
onSearchChange={this.onSearchChange}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
<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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/semantic-ui-react.min.js"></script>
<div id="root"></div>
编辑 作为您的评论的后续。
我查了例子。即使在我输入内容时,它也没有在控制台中显示任何内容
当搜索输入发生变化时,你不是在谈论你所讨论的onChange
的select
。
您可以使用具有相同参数的onSearchChange
。 (我已经更新了这个例子)
我已经实现如下
React hooks功能如下,如果你愿意,你也可以通过handleOnChange
作为道具
const RenderDropdown = ({optionsArray}) => {
const handleOnChange = (e, data) => {
console.log(data.value);
}
return (
<Dropdown
placeholder='Please select'
fluid
selection
options={optionsArray}
onChange={handleOnChange}
/>
);
}
options数组如下
const optionsArray = [
{
key: 'male',
text: 'Male',
value: 'male',
image: { avatar: true, src: 'https://semantic-ui.com/images/avatar/small/elliot.jpg' },
},
{
key: 'female',
text: 'Female',
value: 'female',
image: { avatar: true, src: 'https://semantic-ui.com/images/avatar/small/stevie.jpg' },
}
]
以下是您的工作代码:
onChangeFollower(event, data){
console.log("on change follower",data.text)
}
render() {
console.log("this.props",this.props)
return (
<div>
<h2>project settings are here</h2>
<h2>Add new Member</h2>
<Dropdown onChange={this.onChangeFollower}
placeholder='Select Member'
fluid search selection options={arr} />
<h2>List of members</h2>
{lr}
</div>
)
}