如何以编程方式清除/重置React-Select？

问题描述 投票：0回答：25

ReactSelect V2和V3似乎有几个道具，例如

clearValue
，
resetValue
和
setValue
。无论我尝试什么，我都无法以编程方式清除选择。 
resetValue
似乎无法从外部访问。

selectRef.setValue([], 'clear')
// or
selectRef.clearValue()

这不会清除当前选择。

我在这里错过了什么或者它还没有完全实施吗？

javascript reactjs react-hooks react-select
25个回答
83
投票

我自己也遇到过这个问题，并设法通过将 

key
传递给 React-Select 组件并附加所选值来解决它。当选择更新时，这将强制 
ReactSelect
重新渲染自身。

我希望这对某人有帮助。

import ReactSelect from 'react-select';

...

<ReactSelect
  key={`my_unique_select_key__${selected}`}
  value={selected || ''}
  ...
/>
63
投票

如果您使用 react-select，您可以尝试将 

null
传递给 
value
属性。

例如：

import React from "react";
import { render } from "react-dom";
import Select from "react-select";

class App extends React.Component {
  constructor(props) {
    super(props);

    const options = [
      { value: "one", label: "One" },
      { value: "two", label: "Two" }
    ];

    this.state = {
      select: {
        value: options[0], // "One" as initial value for react-select
        options // all available options
      }
    };
  }

  setValue = value => {
    this.setState(prevState => ({
      select: {
        ...prevState.select,
        value
      }
    }));
  };

  handleChange = value => {
    this.setValue(value);
  };

  handleClick = () => {
    this.setValue(null); // here we reset value
  };

  render() {
    const { select } = this.state;

    return (
      <div>
        <p>
          <button type="button" onClick={this.handleClick}>
            Reset value
          </button>
        </p>
        <Select
          name="form-field-name"
          value={select.value}
          onChange={this.handleChange}
          options={select.options}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

这是一个可行的示例。

30
投票

您可以使用ref清除react select的值。

import React, { useRef } from "react";
import Select from "react-select";

export default function App() {
  const selectInputRef = useRef();

  const onClear = () => {
    selectInputRef.current.select.clearValue();
  };

  return (
    <div className="App">
      <h1>Select Gender</h1>
      <Select
        ref={selectInputRef}
        options={[
          { value: "male", label: "Male" },
          { value: "female", label: "Female" }
        ]}
      />
      <button onClick={onClear}>Clear Value</button>
    </div>
  );
}
17
投票

只需将值存储在状态中，然后使用 componentDidUpdate 等以编程方式更改状态...

class Example extends Component {

constructor() {
    super()
}

state = {
     value: {label: 'Default value', key : '001'}
}

render() {
   return(
      <Select
         ...
         value={this.state.value}
         ...
      />
   )
)}

注意：'value'应该是一个对象。

9
投票

一个简单的选择是将 

null
传递给 
value
属性。

<Select value={null} />
6
投票

这是我使用 Hooks 以编程方式清除的 React-Select V3 的工作实现。

您可以在

CodeSandbox DEMO中使用它。欢迎任何反馈。

const initialFormState = { mySelectKey: null }; const [myForm, setMyForm] = useState(initialFormState); const updateForm = value => { setMyForm({ ...myForm, mySelectKey: value }); }; const resetForm = () => { setMyForm(initialFormState); }; return ( <div className="App"> <form> <Select name = "mySelect" options = {options} value = {options.filter(({ value }) => value === myForm.mySelectKey)} getOptionLabel = {({ label }) => label} getOptionValue = {({ value }) => value} onChange = {({ value }) => updateForm(value)} /> <p>MyForm: {JSON.stringify(myForm)}</p> <input type="button" value="Reset fields" onClick={resetForm} /> </form> </div> );
5
投票
如果有人使用 Hooks 寻找解决方案。 React-Select V3.05：

const initial_state = { my_field: "" } const my_field_options = [ { value: 1, label: "Daily" }, { value: 2, label: "Weekly" }, { value: 3, label: "Monthly" }, ] export default function Example(){ const [values, setValues] = useState(initial_state); function handleSelectChange(newValue, actionMeta){ setValues({ ...values, [actionMeta.name]: newValue ? newValue.value : "" }) } return <Select name={"my_field"} inputId={"my_field"} onChange={handleSelectChange} options={my_field_options} placeholder={values.my_field} isClearable={true} /> }
5
投票
在最上面的答案中，请注意该值需要为“null”而不是“未定义”才能正确清除。

4
投票
在 v5 中，您实际上可以传递 prop

isClearable={true}

 使其可清除，这可以轻松重置所选值

3
投票
如果您在 React Developers 面板中选中“选择组件”，您将看到它被另一个 – 状态管理器包装。所以你的引用基本上是对状态管理器的引用，而不是对选择本身的引用。

幸运的是，StateManager 有状态）和一个值对象，您可以将其设置为您想要的任何值。

例如（这是来自我的项目，resetGroup 是我附加到 DOM 中某个按钮的 onClick 处理程序）：

<Select onChange={this.handleGroupSelect} options={this.state.groupsName.map(group => ({ label: group, value: group }) )} instanceId="groupselect" className='group-select-container' classNamePrefix="select" placeholder={this.context.t("Enter name")} ref={c => (this.groupSelect = c)} /> resetGroup = (e) => { e.preventDefault() this.setState({ selectedGroupName: "" }) this.groupSelect.state.value.value = "" this.groupSelect.state.value.label = this.context.t("Enter name") }
3
投票
对于那些使用函数组件的人，这里有一个

基本演示，介绍如何基于某些更改/触发/reduxValue 重置反应选择。

import React, { useState, useEffect } from 'react'; import Select from 'react-select'; const customReactSelect = ({ options }) => { const [selectedValue, setSelectedValue] = useState([]); /** * Based on Some conditions you can reset your value */ useEffect(() => { setSelectedValue([]) }, [someReduxStateVariable]); const handleChange = (selectedVal) => { setSelectedValue(selectedVal); }; return ( <Select value={selectedValue} onChange={handleChange} options={options} /> ); }; export default customReactSelect;
2
投票
如果它对任何人有帮助，这是我的解决方案：我创建了一个按钮来通过将状态设置回其初始值来清除所选值。

<button onClick={() => this.clearFilters()} >Clear</button> clearFilters(){ this.setState({ startTime: null }) }
完整代码示例如下：

import React from "react" import Select from 'react-select'; const timeSlots = [ { value: '8:00', label: '8:00' }, { value: '9:00', label: '9:00' }, { value: '10:00', label: '10:00' }, ] class Filter extends React.Component { constructor(){ super(); this.state = { startTime: null, } } startTime = (selectedTime) => { this.setState({ startTime: selectedTime }); } clearFilters(){ this.setState({ startTime: null, }) } render(){ const { startTime } = this.state; return( <div> <button onClick={() => this.clearFilters()} >Clear</button> <Select value={startTime} onChange={this.startTime} options={timeSlots} placeholder='Start time' /> </div> ) } } export default Filter





    



      

      
      
      

      

        

          

            

              
2
投票

              
            

          

        

        
您可以将该值设置为空


   const [selectedValue, setSelectedValue] = useState();
   const [valueList, setValueList] = useState([]); 
   const [loadingValueList, setLoadingValueList] = useState(true);


 useEffect(() => {
       //on page load update valueList and Loading as false
      setValueList(list);
      loadingValueList(false)
    }, []);

                                
  const onClear = () => {
     setSelectedValue(null);  // this will reset the selected value
  };

<Select
       className="basic-single"
       classNamePrefix="select"
       value={selectedValue}
       isLoading={loadingValueList}
       isClearable={true}
       isSearchable={true}
       name="selectValue"
       options={valueList}
       onChange={(selectedValue) => 
       setSelectedValue(selectedValue)}
      />
  <button onClick={onClear}>Clear Value</button>

    



      

      
      
      

      

        

          

            

              
2
投票

              
            

          

        

        
反应选择/可创建。


该问题明确寻求反应选择/可创建的解决方案。请找到下面的代码，这是问题的简单答案和解决方案。您可以根据您的特定任务修改代码。


import CreatableSelect from "react-select/creatable";

const TestAction = (props) => {
  const { buttonLabelView, className } = props;
  const selectInputRef = useRef();

  function clearSelected() {
    selectInputRef.current.select.select.clearValue();
  }

  const createOption = (label, dataId) => ({
    label,
    value: dataId,
  });

  const Options = ["C1", "C2", "C3", "C4"]?.map((post, id) => {
    return createOption(post, id);
  });

  return (
    <div>
      <CreatableSelect
        ref={selectInputRef}
        name="dataN"
        id="dataN"
        className="selctInputs"
        placeholder=" Select..."
        isMulti
        options={Options}
      />

      <button onClick={(e) => clearSelected()}> Clear </button>
    </div>
  );
};

export default TestAction;


    



      

      
      
      

      

        

          

            

              
2
投票

              
            

          

        

        
没有一个最重要的建议对我有用，而且它们似乎都有点过分了。这是对我有用的重要部分


<Select 
    value={this.state.selected && Object.keys(this.state.selected).length ? this.state.selected : null},
    onChange={this.handleSelectChange}
/>

    



      

      
      
      

      

        

          

            

              
2
投票

              
            

          

        

        
以编程方式清除react-select的值：


let ref = useRef(null);

输入栏：


<Select ref={selectInputRef} ...other options/>

重置功能/方法：


const resetFilters = () => {selectInputRef.current.clearValue()};

大多数用户已经与 
selectInputRef.current.select.clearValue()
 分享了代码
但这是针对旧版本的
react-select

    



      

      
      
      

      

        

          

            

              
1
投票

              
            

          

        

        
在react-select的value属性中传递null将重置它。

    



      

      
      
      

      

        

          

            

              
1
投票

              
            

          

        

        
解决方案都不能帮助我。
这对我有用：


import React, { Component, Fragment } from "react";

import Select from "react-select";
import { colourOptions } from "./docs/data";

export default class SingleSelect extends Component {
  selectRef = null;

  clearValue = () => {
    this.selectRef.select.clearValue();
  };

  render() {
    return (
      <Fragment>
        <Select
          ref={ref => {
            this.selectRef = ref;
          }}
          className="basic-single"
          classNamePrefix="select"
          defaultValue={colourOptions[0]}
          name="color"
          options={colourOptions}
        />
        <button onClick={this.clearValue}>clear</button>
      </Fragment>
    );
  }
}

    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
if you are using formik then use below code to reset react-select value.

useEffect(()=>{
formik.setFieldValue("stateName", [])
},[])

Where stateName is html field name.

if you want to change value according to another dropdown/select (countryName) then pass that field value in useEffect array like below

useEffect(()=>{
formik.setFieldValue("stateName", [])
},[formik.values.countryName])

    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
Zeeshan 的答案确实是正确的 - 您可以使用 
clearValue()
 但是当您这样做时，
Select
 实例不会像您想象的那样重置为您的 
defaultValue
 道具。 
clearValue()
 返回一般 
Select...
 标签，
value
 中没有数据。


您可能想在重置中使用 
selectOption()
 来明确告诉 react-select
 
应重置为什么值/标签。我如何接线（使用 Next.js、
styled-components
 和 
react-select
）：
import { useState, useRef } from 'react'
import styled from 'styled-components'
import Select from 'react-select'

// Basic button design for reset button
const UIButton = styled.button`
  background-color: #fff;
  border: none;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font-weight: 700;
  min-width: 250px;
  padding: 17px 10px;
  text-transform: uppercase;
  transition: 0.2s ease-in-out;

  &:hover {
    background-color: lightgray;
  }
`

// Using style object `react-select` library indicates as best practice
const selectStyles = {
  control: (provided, state) => ({
    ...provided,
    borderRadius: 0,
    fontWeight: 700,
    margin: '0 20px 10px 0',
    padding: '10px',
    textTransform: 'uppercase',
    minWidth: '250px'
  })
}

export default function Sample() {
  // State for my data (assume `data` is valid)
  const [ currentData, setCurrentData ] = useState(data.initial)

  // Set refs for each select you have (one in this example)
  const regionOption = useRef(null)

  // Set region options, note how I have `data.initial` set here
  // This is so that when my select resets, the data will reset as well
  const regionSelectOptions = [
    { value: data.initial, label: 'Select a Region' },
    { value: data.regionOne, label: 'Region One' },    
  ]

  // Changes data by receiving event from select form
  // We read the event's value and modify currentData accordingly
  const handleSelectChange = (e) => {
    setCurrentData(e.value)
  }

  // Reset, notice how you have to pass the selected Option you want to reset
  // selectOption is smart enough to read the `value` key in regionSelectOptions 
  // All you have to do is pass in the array position that contains a value/label obj
  // In my case this would return us to `Select a Region...` label with `data.initial` value
  const resetData = () => {
    regionOption.current.select.selectOption(regionSelectOptions[0])
    setCurrentData(data.initial)
  }

  // notice how my `UIButton` for the reset is separate from my select menu
  return(
    <>
    <h2>Select a region</h2>
    <Select 
      aria-label="Region select menu"
      defaultValue={ regionSelectOptions[0] }
      onChange={ event => handleDataChange(event) }
      options={ regionSelectOptions }
      ref={ regionOption }
      styles={ selectStyles }
    />
    <UIButton 
      onClick={ resetData }
    >
      Reset
    </UIButton>
    </>
  )
}


    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        

现在如果你使用 ref，你可以这样做：


selectRef = null
<Select
  ...
  ref={c => (selectRef=c)}
/>
clearValue = () => {
   selectRef.clearValue();
};




这里的 
c
 将是 
Select2
 React 组件
    





      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        


React select 使用数组，因此您必须传递一个
空数组
不为空。
使用React的useState：


import ReactSelect from 'react-select'

const Example = () => {

     const [val, setVal] = useState()

     const reset = () => {
         setVal([])
     }

     return <ReactSelect  
         value={val}/>
}

export default Example


    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
创建一个名为 onClear 的函数，并将 Selected 设置为空字符串。
    

  1. 在句柄提交函数内，调用onClear函数。
    2. 

  2. 

    3. 这将完美地发挥作用。


示例代码：


const onClear = () => {
  setSelected("");
};
    
const handleSubmit = ()=>{
 1 your data first ......(what you are posting or updating)
 2 onClear();
}


    



      

      
      
      

      

        

          

            

              
-1
投票

              
            

          

        

        

    



      

      
      
      

      

        

          

            

              
-3
投票

              
            

          

        

        



初始状态：



firstSelectData: [],
secondSelectData:[],
secondSelectValue: null




我创建了一个用于填充第一个选择的操作。在更改第一个选择时，我调用一个操作来填充第二个选择。



在填充成功后，首先选择我将（
secondSelectData
设置为
[]
，
secondSelectValue
设置为
null
）


成功填充第二个选择后，我将（
secondSelectValue
设置为
null
）
在更改第二个选择时，我调用一个操作来更新 
secondSelectValue
 选择的新值
    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.