首页 › React论坛 › React Select组件

没事找事 發表於 2020-1-22 11:32:00

React Select组件

<style>#cnblogs_post_body img { max-width: 600px; height: auto }</style>
<p>官网：</p>
<p>　　1）http://jedwatson.github.io/react-select/</p>
<p>　　2）https://github.com/JedWatson/react-select</p>
<p>　　3）https://www.npmjs.com/package/react-select</p>
<p>demo结构：</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1615446/202001/1615446-20200122111723501-71004572.png" alt=""></p>
<p>　　package.json</p>
<div class="cnblogs_code">
<pre>"dependencies"<span style="color: rgba(0, 0, 0, 1)">: {
    </span>"react": "^16.12.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"react-dom": "^16.12.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"react-select": "^3.0.8"<span style="color: rgba(0, 0, 0, 1)">,
    ...
},</span></pre>
</div>
<p>　　index.jsx</p>
<div class="cnblogs_code">
<pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">
import ReactDOM from </span>'react-dom'<span style="color: rgba(0, 0, 0, 1)">

import App from </span>'./components/App.jsx'<span style="color: rgba(0, 0, 0, 1)">

ReactDOM.render(</span>&lt;App /&gt;, document.getElementById('root'))</pre>
</div>
<p>&nbsp;　　App.jsx</p>
<div class="cnblogs_code">
<pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">
import Demo from </span>'./Demo.jsx'<span style="color: rgba(0, 0, 0, 1)">
import Demo2 from </span>'./Demo2.jsx'<span style="color: rgba(0, 0, 0, 1)">

export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> class App extends React.Component {
    constructor(props) {
      super(props)
      </span><span style="color: rgba(0, 0, 255, 1)">this</span>.state =<span style="color: rgba(0, 0, 0, 1)"> {}
    }

    render() {
      </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
            </span>&lt;div style={{width: '400px'}}&gt;
                &lt;Demo /&gt;
                &lt;br /&gt;
                &lt;Demo2 /&gt;
            &lt;/div&gt;
<span style="color: rgba(0, 0, 0, 1)">      )
    }
}</span></pre>
</div>
<p>　　Demo.jsx</p>
<div class="cnblogs_code">
<pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;
import Select from </span>'react-select'<span style="color: rgba(0, 0, 0, 1)">;

const options </span>=<span style="color: rgba(0, 0, 0, 1)"> [
    { value: </span>'chocolate', label: 'Chocolate'<span style="color: rgba(0, 0, 0, 1)"> },
    { value: </span>'strawberry', label: 'Strawberry'<span style="color: rgba(0, 0, 0, 1)"> },
    { value: </span>'vanilla', label: 'Vanilla'<span style="color: rgba(0, 0, 0, 1)"> },
];

export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> class Demo extends React.Component {
    state </span>=<span style="color: rgba(0, 0, 0, 1)"> {
      selectedOption: </span><span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">,
    };
    handleChange </span>= selectedOption =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.setState({ selectedOption });
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Option selected: { value: "chocolate", label: "Chocolate" }</span>
<span style="color: rgba(0, 0, 0, 1)">      console.log(`Option selected:`, selectedOption);
    };
    render() {
      const { selectedOption } </span>= <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.state;

      </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
            </span>&lt;<span style="color: rgba(0, 0, 0, 1)">Select
                value</span>=<span style="color: rgba(0, 0, 0, 1)">{selectedOption}
               <span style="color: rgba(255, 0, 0, 1)"><strong><em> onChange</em></strong></span></span><span style="color: rgba(255, 0, 0, 1)"><strong><em>={this</em></strong></span><span style="color: rgba(0, 0, 0, 1)"><span style="color: rgba(255, 0, 0, 1)"><strong><em>.handleChange}</em></strong></span>
                options</span>=<span style="color: rgba(0, 0, 0, 1)">{options}
            </span>/&gt;
<span style="color: rgba(0, 0, 0, 1)">      );
    }
}</span></pre>
</div>
<p>　　Demo2.jsx</p>
<div class="cnblogs_code">
<pre>import React, { Component, Fragment } from 'react'<span style="color: rgba(0, 0, 0, 1)">;
import Select from </span>'react-select'<span style="color: rgba(0, 0, 0, 1)">;

const Checkbox </span>= props =&gt; &lt;input type="checkbox" {...props} /&gt;;
const colourOptions =<span style="color: rgba(0, 0, 0, 1)"> [
    { value: </span>'ocean', label: 'Ocean', color: '#00B8D9', isFixed: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> },
    { value: </span>'blue', label: 'Blue', color: '#0052CC', isDisabled: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> },
    { value: </span>'purple', label: 'Purple', color: '#5243AA'<span style="color: rgba(0, 0, 0, 1)"> },
    { value: </span>'red', label: 'Red', color: '#FF5630', isFixed: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> },
    { value: </span>'orange', label: 'Orange', color: '#FF8B00'<span style="color: rgba(0, 0, 0, 1)"> },
    { value: </span>'yellow', label: 'Yellow', color: '#FFC400'<span style="color: rgba(0, 0, 0, 1)"> },
    { value: </span>'green', label: 'Green', color: '#36B37E'<span style="color: rgba(0, 0, 0, 1)"> },
    { value: </span>'forest', label: 'Forest', color: '#00875A'<span style="color: rgba(0, 0, 0, 1)"> },
    { value: </span>'slate', label: 'Slate', color: '#253858'<span style="color: rgba(0, 0, 0, 1)"> },
    { value: </span>'silver', label: 'Silver', color: '#666666'<span style="color: rgba(0, 0, 0, 1)"> },
];

export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> class SingleSelect extends Component {
    state </span>=<span style="color: rgba(0, 0, 0, 1)"> {
      isClearable: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
      isDisabled: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
      isLoading: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
      isRtl: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
      isSearchable: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
    };

    toggleClearable </span>= () =&gt;
      <span style="color: rgba(0, 0, 255, 1)">this</span>.setState(state =&gt; ({ isClearable: !<span style="color: rgba(0, 0, 0, 1)">state.isClearable }));
    toggleDisabled </span>= () =&gt;
      <span style="color: rgba(0, 0, 255, 1)">this</span>.setState(state =&gt; ({ isDisabled: !<span style="color: rgba(0, 0, 0, 1)">state.isDisabled }));
    toggleLoading </span>= () =&gt;
      <span style="color: rgba(0, 0, 255, 1)">this</span>.setState(state =&gt; ({ isLoading: !<span style="color: rgba(0, 0, 0, 1)">state.isLoading }));
    toggleRtl </span>= () =&gt; <span style="color: rgba(0, 0, 255, 1)">this</span>.setState(state =&gt; ({ isRtl: !<span style="color: rgba(0, 0, 0, 1)">state.isRtl }));
    toggleSearchable </span>= () =&gt;
      <span style="color: rgba(0, 0, 255, 1)">this</span>.setState(state =&gt; ({ isSearchable: !<span style="color: rgba(0, 0, 0, 1)">state.isSearchable }));
    render() {
      const {
            isClearable,
            isSearchable,
            isDisabled,
            isLoading,
            isRtl,
      } </span>= <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.state;
      </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
            </span>&lt;Fragment&gt;
                &lt;<span style="color: rgba(0, 0, 0, 1)">Select
                  <span style="color: rgba(255, 0, 0, 1)"><strong><em>className</em></strong></span></span><span style="color: rgba(255, 0, 0, 1)"><em><strong>="basic-single"</strong></em></span><strong><span style="color: rgba(255, 0, 0, 1)"><em>
                  classNamePrefix</em><em>="select"</em></span></strong><span style="color: rgba(0, 0, 0, 1)">
                  defaultValue</span>={colourOptions}
                  isDisabled</span>=<span style="color: rgba(0, 0, 0, 1)">{isDisabled}
                  isLoading</span>=<span style="color: rgba(0, 0, 0, 1)">{isLoading}
                  isClearable</span>=<span style="color: rgba(0, 0, 0, 1)">{isClearable}
                  isRtl</span>=<span style="color: rgba(0, 0, 0, 1)">{isRtl}
                  isSearchable</span>=<span style="color: rgba(0, 0, 0, 1)">{isSearchable}
                  name</span>="color"<span style="color: rgba(0, 0, 0, 1)">
                  options</span>=<span style="color: rgba(0, 0, 0, 1)">{colourOptions}
                </span>/&gt;

                &lt;<span style="color: rgba(0, 0, 0, 1)">Checkbox
                  checked</span>=<span style="color: rgba(0, 0, 0, 1)">{isClearable}
                  onChange</span>={<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.toggleClearable}
                  id</span>="cypress-single__clearable-checkbox"
                /&gt;
<span style="color: rgba(0, 0, 0, 1)">                Clearable

                  </span>&lt;<span style="color: rgba(0, 0, 0, 1)">Checkbox
                  checked</span>=<span style="color: rgba(0, 0, 0, 1)">{isSearchable}
                  onChange</span>={<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.toggleSearchable}
                  id</span>="cypress-single__searchable-checkbox"
                /&gt;
<span style="color: rgba(0, 0, 0, 1)">                Searchable
                  </span>&lt;<span style="color: rgba(0, 0, 0, 1)">Checkbox
                  checked</span>=<span style="color: rgba(0, 0, 0, 1)">{isDisabled}
                  onChange</span>={<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.toggleDisabled}
                  id</span>="cypress-single__disabled-checkbox"
                /&gt;
<span style="color: rgba(0, 0, 0, 1)">                Disabled

                  </span>&lt;<span style="color: rgba(0, 0, 0, 1)">Checkbox
                  checked</span>=<span style="color: rgba(0, 0, 0, 1)">{isLoading}
                  onChange</span>={<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.toggleLoading}
                  id</span>="cypress-single__loading-checkbox"
                /&gt;
<span style="color: rgba(0, 0, 0, 1)">                Loading
                  </span>&lt;<span style="color: rgba(0, 0, 0, 1)">Checkbox
                  type</span>="checkbox"<span style="color: rgba(0, 0, 0, 1)">
                  checked</span>=<span style="color: rgba(0, 0, 0, 1)">{isRtl}
                  onChange</span>={<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.toggleRtl}
                  id</span>="cypress-single__rtl-checkbox"
                /&gt;
<span style="color: rgba(0, 0, 0, 1)">                RTL
            </span>&lt;/Fragment&gt;
<span style="color: rgba(0, 0, 0, 1)">      );
    }
}</span></pre>
</div>
<p>&nbsp;</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1615446/202001/1615446-20200122112959344-643541542.png" alt=""></p>
<p>&nbsp;<img src="https://img2018.cnblogs.com/i-beta/1615446/202001/1615446-20200122113041168-543156138.png" alt=""></p>
<p>&nbsp;---</p><br><br>
来源：https://www.cnblogs.com/xy-ouyang/p/12228237.html

查看完整版本: React Select组件