React Select&Dialog

未分类

所用组件均来自material ui 所用实例代码为自己封装的一个新组件

首先安装meterial ui 组件 https://github.com/callemall/material-ui实现Dialog弹窗

其次安装select组件： https://github.com/JedWatson/react-select 实现select

dialog源代码及效果：https://github.com/JedWatson/react-select

select源代码及效果：https://github.com/JedWatson/react-select#async-options-with-promises https://jedwatson.github.io/react-select/

 

以下为封装代码

效果：点击BUTTON按钮后，会弹出一个Dialog，Dialog中是muilt Select选择框`</pre>
</div>
&nbsp;

[Select-Dialog](http://115.159.42.92/wp-content/uploads/2016/08/Select-Dialog.txt)

[![Dialog](http://www.ihongguang.cn/wp-content/uploads/2016/08/Dialog-300x196.png)](http://www.ihongguang.cn/wp-content/uploads/2016/08/Dialog.png)

css代码:[Select-Dialog](http://www.ihongguang.cn/wp-content/uploads/2016/08/Select-Dialog.txt)
<div>
<pre>`    import React from 'react';
    import Dialog from 'material-ui/lib/Dialog';
    import RaisedButton from 'material-ui/lib/raised-button';
    import Select from 'react-select';

    /*select选项*/
    const FLAVOURS = [
    { label: 'banana', value: 'banana' },
    { label: 'apple', value: 'apple' },
    { label: 'paire', value: 'paire' },
    { label: 'ori', value: 'ori' },
    { label: 'red', value: 'red' },
    { label: 'yellow', value: 'yellow' },
    { label: 'blue', value: 'blue' },
    { label: 'pink', value: 'pink' },
    { label: 'banana', value: 'banana' },
    { label: 'apple', value: 'apple' },
    { label: 'paire', value: 'paire' },
    { label: 'ori', value: 'ori' },
    { label: 'red', value: 'red' },
    { label: 'yellow', value: 'yellow' },
    { label: 'blue', value: 'blue' },
    { label: 'pink', value: 'pink' },
];
export default React.createClass({
        propTypes: {
            label: React.PropTypes.string,
        },
        getInitialState: function () {
            return {
                options: FLAVOURS, projectMembers: [],
                projectMonitor:[],
                newProject: false,
            };
        },
        handleOpenForProject :function (){
            this.setState({newProject:true});
        },
        handleClose :function (){
            /*if判断*/
            if(this.state.newProject==true)
            {
                this.setState({newProject:false});
                this.setState({projectMonitor:null});
                this.setState({projectMembers:null});
            }
        },
    handleSelectProjectMember :function(projectMembers) {
        this.setState({ projectMembers });
    },
    handleSelectProjectMonitor :function(projectMonitor) {
    this.setState({ projectMonitor });
},
    render() {
         const actions =
         [
             &lt;RaisedButton label="Cancel" primary={true} onClick={this.handleClose} /&gt;,
             &lt;RaisedButton label="Submit" primary={true} onTouchTap={this.handleClose} /&gt;,
         ];
        return (
         &lt;div &gt;{/*点击此按钮*/}
             &lt;RaisedButton label="New Project"primary={true}  onClick={this.handleOpenForProject} /&gt;
             BUTTON
             &lt;Dialog
             actions={actions}
             modal={false}
             open={this.state.newProject}
             onRequestClose={this.handleClose} &gt;
             &lt;div id="Dialog_Title"&gt;
                 &lt;h2 id="title"&gt;Add a new project&lt;/h2&gt;&lt;br/&gt;
             &lt;/div&gt;

                 &lt;div id="textField"&gt;
                     &lt;div className="section"&gt;
                         &lt;Select multi simpleValue value={this.state.projectMonitor}  options={this.state.options}  placeholder="Select Monitor"  onChange={this.handleSelectProjectMonitor} /&gt;
                     &lt;/div&gt;
                     &lt;div className="section"&gt;
                       &lt;Select multi simpleValue value={this.state.projectMembers} options={this.state.options} placeholder="Select Members"  onChange={this.handleSelectProjectMember} /&gt;
                     &lt;/div&gt;
             &lt;/div&gt;
         &lt;/Dialog&gt;
         &lt;/div&gt;
     );
}
})


 

本文标题:React Select&Dialog

文章作者:谢红光

发布时间:2016-08-26, 20:38:34

最后更新:2017-07-23, 09:04:50

原始链接:http://yoursite.com/2016/08/26/react-selectdialog/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
|