Javascript 我必须在Blueprint.js中的MultiSelect(labs)组件中使用TypeScript吗
我正忙于试验Blueprint.js和MultiSelect组件,我不知道该组件仍在积极开发中: 我从未使用过TypeScript,据说Javascript 我必须在Blueprint.js中的MultiSelect(labs)组件中使用TypeScript吗,javascript,reactjs,typescript,blueprintjs,Javascript,Reactjs,Typescript,Blueprintjs,我正忙于试验Blueprint.js和MultiSelect组件,我不知道该组件仍在积极开发中: 我从未使用过TypeScript,据说 // Select<T> is a generic component to work with your data types. // In TypeScript, you must first obtain a non-generic reference: const FilmSelect = Select.ofType<Film>
// Select<T> is a generic component to work with your data types.
// In TypeScript, you must first obtain a non-generic reference:
const FilmSelect = Select.ofType<Film>();
该组件定义为:
import React from 'react';
import Flexbox from 'flexbox-react';
import {Dialog, Button, Intent} from '@blueprintjs/core';
import {MultiSelect} from '@blueprintjs/labs';
import {inject, observer} from 'mobx-react';
import Avatar from 'react-avatar';
@inject('AccountRelationshipsStore', 'AccountUsersStore', 'ToastStore')@observer
export default class AccountRelationshipsNewRelationship extends React.Component {
constructor(props) {
super(props);
this.state = ({isSubmitting: false});
}
renderUser(handleClick, isActive, user) {
return (
<span>{user.fullName}</span>
);
}
renderTag(user) {
return user.fullName;
}
handleItemSelect(item) {
console.log(item);
}
render() {
return (
<Dialog isOpen={this.props.dialogOpen} onClose={() => this.props.toggleDialog()} canOutsideClickClose={true} title={I18n.t('js.add_a_new_user_relationship', {
type: this.props.AccountRelationshipsStore.activeRelationship.name.toLowerCase(),
name: this.props.AccountRelationshipsStore.activeUser.fullName
})} className='side-dialog' inline={true}>
<form>
<div className='pt-dialog-body'>
<Flexbox flexDirection='column' flexGrow={1}>
<Flexbox flexDirection='row' justifyContent='center' flexGrow={1}>
<Avatar src={this.props.AccountRelationshipsStore.activeUser.imageFileName} size={100} round={true} className=''/>
</Flexbox>
<Flexbox flexDirection='row' justifyContent='center' flexGrow={1} marginTop='10px'>
<p className='pt-text-muted'>{this.props.AccountRelationshipsStore.activeUser.fullName}</p>
</Flexbox>
<Flexbox>
<MultiSelect items={this.props.AccountUsersStore.users} itemRenderer={this.renderUser.bind(this)} onItemSelect={this.handleItemSelect.bind(this)} tagRenderer={this.renderTag.bind(this)}/>
</Flexbox>
</Flexbox>
</div>
<div className='pt-dialog-footer pt-dialog-footer-bottom'>
<div className='pt-dialog-footer-actions'>
<Button text={I18n.t('js.cancel')} onClick={() => this.props.toggleDialog()}/>
<Button intent={Intent.PRIMARY} type='submit' text={I18n.t('js.set_relationships')} loading={this.state.isSubmitting}/>
</div>
</div>
</form>
</Dialog>
);
}
}
从“React”导入React;
从“Flexbox react”导入Flexbox;
从“@blueprintjs/core”导入{对话框、按钮、意图};
从'@blueprintjs/labs'导入{MultiSelect};
从“mobx react”导入{inject,observer};
从“反应化身”导入化身;
@inject('AccountRelationshipsStore','AccountUsersStore','ToastStore')@observer
导出默认类AccountRelationshipNewRelationship扩展React.Component{
建造师(道具){
超级(道具);
this.state=({isSubmitting:false});
}
renderUser(handleClick、isActive、user){
返回(
{user.fullName}
);
}
renderTag(用户){
返回user.fullName;
}
handleItemSelect(项目){
控制台日志(项目);
}
render(){
返回(
this.props.toggleDialog()}canOutsideClickClose={true}title={I18n.t('js.add\u new\u user\u relationship'{
类型:this.props.AccountRelationshipsStore.activeRelationship.name.toLowerCase(),
名称:this.props.AccountRelationshipsStore.activeUser.fullName
})}className='side-dialog'内联={true}>
{this.props.AccountRelationshipsStore.activeUser.fullName}
this.props.toggleDialog()}/>
);
}
}
是的,您可以将组件与JS一起使用。只需省略泛型类型参数:
const UserMultiSelect = MultiSelect.ofType();
<UserMultiSelect items={this.props.AccountUsersStore.users} ... />
const UserMultiSelect=MultiSelect.ofType();
我承认这有点不直观,所以可能需要更新文档
const UserMultiSelect = MultiSelect.ofType();
<UserMultiSelect items={this.props.AccountUsersStore.users} ... />