有关在语义UI反应中使用Dropdown React的问题

时间:2019-06-10 18:50:38

标签: reactjs dropdown semantic-ui-react

我想使用 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>
);
}

有人对这个问题有想法吗?

0 个答案:

没有答案