React-Select를 프로그래밍 방식으로 지우거나 재설정하는 방법

React-Select를 프로그래밍 방식으로 지우거나 재설정하는 방법

React Select V2와 V3에는 다음과 같은 소품이 몇 개 있는 것 같습니다.clearValue,resetValue그리고.setValue무엇을 시도하든 프로그래밍 방식으로 선택을 지울 수 없습니다. resetValue외부에서는 접근할 수 없는 것 같습니다.

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

이렇게 해도 현재 선택 항목이 지워지지 않습니다.

여기서 놓치고 있는 것이 있습니까, 아니면 아직 완전히 구현되지 않았습니까?

제가 직접 이 문제를 발견했고, 이 문제를 해결했습니다.key선택한 값이 추가된 React-Select 컴포넌트로 이동합니다.이렇게 하면 강제로ReactSelect선택 항목이 업데이트될 때 자동으로 다시 표시됩니다.

이게 도움이 됐으면 좋겠어요.

import ReactSelect from 'react-select';

...

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

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"));

여기 이것의 실행 예가 있습니다.

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>
  );
}

CodeSandbox 링크는 다음과 같습니다.

값을 상태에 저장하고 componentDidUpdate 등을 사용하여 프로그래밍 방식으로 상태를 변경하기만 하면 됩니다.

class Example extends Component {

constructor() {
    super()
}

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

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

참고: '값'은 개체여야 합니다.

간단한 선택은 합격하는 것이다.null에게value소품

<Select value={null} />

이것은 후크를 사용하여 프로그래밍 방식으로 클리어된 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>
);

Hooks를 사용하여 해결책을 찾는 사람이 있다면.반응-선택 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}
           /> 
}

상위 답변에 따라 올바르게 지우려면 값이 "정의되지 않은" 것이 아니라 "null"이어야 합니다.

React Developers 패널에서 Select component를 선택하면 다른 State Manager에 의해 랩되어 있음을 알 수 있습니다.따라서 기본적으로 Select 자체를 참조하지 않고 State Manager를 참조합니다.

다행히 StateManager에는 state)와 원하는 값으로 설정할 수 있는 값 객체가 있습니다.

예를 들어(이것은 내 프로젝트에서 가져온 것이며, 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")
    }

함수 컴포넌트를 사용하는 사용자를 위해, 여기에서는 리액트를 리셋하는 방법에 대한 기본 데모를 소개합니다.일부 변경/트리거/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;

v5에서는 실제로 프로펠러를 통과시킬 수 있습니다.isClearable={true}선택한 값을 쉽게 재설정할 수 있도록 합니다.

값을 null로 설정할 수 있습니다.

   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>

반응 선택/작성 가능.

이 질문은 반응 선택/창조 가능한 해결책을 명시적으로 모색합니다.아래 코드와 질문에 대한 간단한 답변 및 해결책을 찾으십시오.특정 태스크의 코드를 수정할 수 있습니다.

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;

만약 도움이 된다면, 제 해결책은 다음과 같습니다.상태를 초기값으로 되돌려 선택한 값을 지우는 버튼을 만들었습니다.

<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

react-select의 값 속성에 null을 전달하면 리셋됩니다.

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])

Zeeshan을 사용하면 .clearValue() '이러다'는Select로 "defaultValue생각하시는 것처럼 소품입니다. clearValue()Select...에 .value.

리셋 시 를 사용해, 다음의 정보를 명시적으로 전달할 필요가 있습니다.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>
    </>
  )
}

아무리 생각해도 도움이 되지 않는다.이 작업은 다음과 같습니다.

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>
    );
  }
}

가장 중요한 제안들 중 어느 것도 나에게 통하지 않았고 그것들은 모두 약간 과장된 것처럼 보였다.여기 제가 했던 일의 중요한 부분이 있습니다.

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

StateManager는 5.5.0으로 설정합니다.
ref를 수 요. ref를 쓰면 .

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

이 기거 here here herec 하면 '아까불까불까불까불까불까불까불까불까불까.Select2 컴포넌트

이게 나를 괴롭혔어. 그래서 여기 있다:

반응 선택에서는 어레이를 사용하기 때문에 null이 아닌 빈 어레이를 전달해야 합니다.

React의 useState 사용:

import ReactSelect from 'react-select'

const Example = () => {

     const [val, setVal] = useState()

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

     return <ReactSelect  
         value={val}/>
}

export default Example

1. onClear라는 함수를 만들고 setSelected를 빈 문자열로 설정합니다.
2. 핸들 송신 함수 내에서 onClear 함수를 호출합니다.

이건 완벽하게 작동될 거야.

코드 예:

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

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])

나는 redex-observatible을 사용한다.

초기 상태:

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

첫 번째 선택을 채우기 위한 작업을 만듭니다.첫 번째 선택을 바꾸면 두 번째 선택을 채우기 위한 조치를 취합니다.

시 I set설정)을 합니다.secondSelectData로로 합니다.[],secondSelectValue로로 합니다.null)

두 시 set (I set (I set (I set (I set (I set (I set (I set)))))를 합니다.secondSelectValue로로 합니다.nullselect 시 update action update 두두 ) ) secondSelectValue value (새로운 값이 선택됨)로

언급URL : https://stackoverflow.com/questions/50412843/how-to-programmatically-clear-reset-react-select