[英]semantic ui react default selected options in dropdown
我想在我的dropdown
选择默认选项。 当我添加所选选项但不使用默认选定选项渲染时,下面的代码有效:
render() {
return (
<Form onSubmit={this.handleFormSubmit}>
<Form.Dropdown
placeholder="Select Options"
fluid multiple selection
options={this.state.options}
onChange={this.handleMultiChange}
/>
<Button type="submit">Submit</Button>
</Form>
);
}
我尝试添加defaultSelectedLabel={this.state.selected}
。
this.state.selected
是一个选项数组,默认情况下所选的值为true:
render() {
return (
<Form onSubmit={this.handleFormSubmit}>
<Form.Dropdown
placeholder="Select Options"
fluid multiple selection
options={this.state.options}
onChange={this.handleMultiChange}
defaultSelectedLabel={this.state.selected}
/>
<Button type="submit">Submit</Button>
</Form>
);
}
但我得到以下警告:
Warning: Failed prop type: Invalid prop defaultSelectedLabel supplied to Dropdown.
我使用defaultValue
prop做了同样的事情,但得到了同样的错误
如何在我的dropdown
获取默认选择的选项?
你离结果不远了。
您可以像docs所说的那样在defaultValue
道具中提供一系列值。
defaultValue {number | string | arrayOf}初始值或值数组(如果是多个)。
这是一个例子:
class YourComponent extends Component {
componentWillMount() {
this.setState({
options: [
{value:'1', text:'A'},
{value:'2', text:'B'},
{value:'3', text:'C'},
],
selected: ['1', '2'], // <== Here, the values of selected options
});
}
...
render() {
return (
<Form onSubmit={this.handleFormSubmit}>
<Form.Dropdown
placeholder="Select Options"
fluid multiple selection
options={this.state.options}
onChange={this.handleMultiChange}
defaultValue={this.state.selected} // <== here the default values
/>
<Button type="submit">Submit</Button>
</Form>
);
}
}
编辑 : 这是一个实例
适用于单一选择:
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Form, Button } from 'semantic-ui-react';
import './style.css';
class App extends Component {
componentWillMount() {
this.setState({
options: [
{value:'1', text:'Lamborghini Aventador 2016'},
{value:'2', text:'VW Beetle 1971'},
{value:'3', text:'Ford Mustang'},
],
selected: '1',
});
}
render() {
return (
<div>
<Form onSubmit={this.handleFormSubmit}>
<Form.Dropdown
placeholder="Select Options"
defaultValue={this.state.selected}
fluid selection
options={this.state.options}
/>
<Button type="submit">Submit</Button>
</Form>
</div>
);
}
}
render(<App />, document.getElementById('root'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.