title: Antd Multi Select Clear Button
body: <p>Below is the basic code from the antd website about creating a multi select option. What I want to achieve is create a 'clear' button. When clicking clear it will remove all the boxes with the 'x' that say a10, b12, etc. How do I clear out the box?</p>
  
  <p><strong>I don't want to use allowClear, I want to tie this to my own button</strong></p>
  
  <p><a href="https://codesandbox.io/s/g0dec" rel="nofollow noreferrer">https://codesandbox.io/s/g0dec</a></p>
  
  <pre><code>const { Select } = antd;
  
  const { Option } = Select;
  
  const children = [];
  for (let i = 10; i &lt; 36; i++) {
    children.push(&lt;Option key={i.toString(36) + i}&gt;{i.toString(36) + i}&lt;/Option&gt;);
  }
  
  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  
  ReactDOM.render(
    &lt;Select
      mode="multiple"
      style={{ width: '100%' }}
      placeholder="Please select"
      defaultValue={['a10', 'c12']}
      onChange={handleChange}
    &gt;
      {children}
    &lt;/Select&gt;,
    mountNode,
  );
  </code></pre>