我想使用 semantic-ui-react
中的Dropdown组件构建一个下拉列表
我遵循了这里托管的代码:https://codesandbox.io/s/50xzvqrwxn?module=/example.js,这看起来非常不错。
将代码放入代码中后,结果如下:
这是我的渲染函数:
render() {
return (
<div className="NewNote">
<form onSubmit={this.handleSubmit}>
<FormGroup controlId="content">
<FormControl
placeholder="Enter your comment on file here..."
onChange={this.handleChange}
value={this.state.content}
componentClass="textarea"
/>
</FormGroup>
<FormGroup controlId="file">
<ControlLabel>Attachment</ControlLabel>
<FormControl onChange={this.handleFileChange} type="file" />
</FormGroup>
<FormGroup>
<ControlLabel>Select file category</ControlLabel>
</FormGroup>
<Dropdown text='File'>
<Dropdown.Menu>
<Dropdown.Item text='New' />
<Dropdown.Item text='Open...' description='ctrl + o' />
<Dropdown.Item text='Save as...' description='ctrl + s' />
<Dropdown.Item text='Rename' description='ctrl + r' />
<Dropdown.Item text='Make a copy' />
<Dropdown.Item icon='folder' text='Move to folder' />
<Dropdown.Item icon='trash' text='Move to trash' />
<Dropdown.Divider />
<Dropdown.Item text='Download As...' />
<Dropdown.Item text='Publish To Web' />
<Dropdown.Item text='E-mail Collaborators' />
</Dropdown.Menu>
</Dropdown>
<LoaderButton
block
bsStyle="primary"
bsSize="large"
disabled={!this.validateForm()}
type="submit"
isLoading={this.state.isLoading}
text="Create"
loadingText="Creating…"
/>
</form>
</div>
);
}
有人对这个问题有想法吗?