재료-ui 자기완성 투명값

재료-ui 자기완성 투명값

리액션 코드에 문제가 하나 있습니다.

저는 Material-ui와 redex 형식을 사용합니다."좋아요" 입력과 "변경 후 이 선택" 을 선택하면 값이 리셋됩니다.리액트 폼에서 액션 "변경" 을 사용하여 텍스트 필드에 값을 설정합니다.그러나 라벨은 아직 남아 있습니다.에서 값을 클리어 또는 리셋할 수 있습니까?

<Autocomplete
    options={list}
    getOptionLabel={option => option.name}
    onInputChange={onChange}
    onChange={onChangeAutoComplete}
    noOptionsText='Нет доступных вариантов'
    loadingText='Загрузка...'
    openText='Открыть'
    renderInput={params => (
        <Field
            {...params}
            label={label}
            name={fieldName}
            variant="outlined"
            fullWidth
            component={renderTextField}
            className={classes.textField}
            margin="normal"
        />
    )}
/>

밸류 프로펠러에서 후크를 사용하면 자동완성 컴포넌트의 기능이 상실됩니다(적어도 저는).클래스를 사용하는 방법과 로컬 상태를 설정하는 방법은 동일합니다.

다행히도 이것은 반응 부품이기 때문에 "키" 받침대가 있습니다.키 프로포트가 변경되면 컴포넌트가 기본값(선택된 항목이 없으므로 빈 배열)으로 다시 렌더링됩니다.부모 컴포넌트의 훅을 사용하여 리셋이 필요할 때마다 값을 키 소품에 전달했습니다.

<Autocomplete
    key={somethingMeaningful} // Bool, or whatever just change it to re-render the component
//...other props
/>

이게 도움이 됐으면 좋겠네요!

재료 UI 자동 완성onInputChange콜백은reason논쟁.입력에 의해 입력이 변경된 경우 이유는 다음과 같습니다.input옵션을 선택한 경우 이유는 다음과 같습니다.reset.

onInputChange={(event, newInputValue, reason) => {
    if (reason === 'reset') {
      setValue('')
      return
    } else {
      setValue(newInputValue)
    }
  }}

setValue이useState값 상태를 자동 완성으로 전달할 수 있습니다.value소유물.

사용하다value당신의 안에서<Autocomplete />다음과 같습니다.

<Autocomplete
    value={this.state.value} //insert your state key here
//...other props
/>

그런 다음 자동 완성 필드 값을 지우려면 해당 키의 상태를 지웁니다.

Autocomplete의 가치를 클리어하는 매우 더러운 방법을 게시합니다.다른 기능이 작동하지 않을 때만 사용해 보십시오.

import React, { useRef } from 'react';
...
const autoC = useRef(null);
...
<Autocomplete
  ...
  ref={autoC}
/>

그 후 값을 클리어하고 싶을 때

const ele = autoC.current.getElementsByClassName('MuiAutocomplete-clearIndicator')[0];
if (ele) ele.click();

이게 나한테 효과가 있었어.

const [name, setName] = useState('');

<Autocomplete
  inputValue={name}
  onChange={(e,v)=>setName(v?.name||v)}
  ...
/>
<Button onClick={()=>setName('')}>
 Clear
</Button>

항목을 선택할 때 다음과 같은 기능을 사용하여 자동 완성 필드를 지울 수 있습니다.

<Autocomplete
  value={null}
  blurOnSelect={true} />

또, 다음의 설정을 실시할 필요가 있는 경우도 있습니다.clearOnBlur={true}를 사용하고 있는 경우freeSolo선택.

출처: https://mui.com/api/autocomplete/ #displays

여러 개의 프로펠이 false인 inputValue 프로펠을 업데이트하여 이를 달성했습니다.여러 개의 도구를 사용하는 경우 문제(버그)가 있습니다.선택한 값은 지워지지 않습니다.

이것을 발견했을 때, 자동 완성 옵션이 변경되어 입력 값을 클리어 하고 싶다고 생각하고 있었습니다.옵션만 바꾸면 해결이 안 돼요.나에게 효과가 있었던 것은 자동완료에 중요한 가치를 더하는 것이었는데, 그것은 클리어해야 하는 변경에 따라 달라졌다.

이 문제를 해결하기 위해, 저는 후크를 만들어서value자동 완성 상태 및 입력 값을 설정합니다.checkCleartrue;

function useAutocompleteInputClear(watch, checkClear) {
    const elmRef = useRef(null);
    useMemo(() => {
            if (!elmRef || !elmRef.current) return;

            if (!checkClear || typeof checkClear !== "function") return;

            const button = elmRef.current.querySelector("button")
            if (checkClear(watch) && button) {
                button.click();
            }

    }, [watch])

    return elmRef;
}

첫번 it it it it it it it it it it it it it it it it it it it it it it it it it it it it it it it it it it it it ?true청소가 이루어집니다.은 「」, 「」, 「」,」를 반환합니다.ref.Autocomplete.

const elmRef = useAutocompleteInputClear(value, v => !v || !v.id)

<Autocomplete ref={elmRef} 
              value={value}
...

onChange 속성을 사용하여 다음 방법으로 지우기 아이콘을 클릭하여 값을 지울 수 있습니다.

<Autocomplete
    fullWidth={true}
    label={'Source'}
    margin={'noraml'}
    multiple={false}
    name={'Source'}
    getOptionSelected={useCallback((option, value) => option.value === value.value)}
    ref={SourceRef}
    value={formValues.Source === '' ? {label: ''} : {label: formValues.Source}}
    options={SourceStatus}
    onChange={useCallback((e, v) => {
        if (typeof v === 'object' && v !== null) {
            handleInputChange(e, v) // help to set the value
        } else {
            handleInputChange(e, {label: ''}) // help to reset the value
        }
    })}
/>

나의 경우, 무료 Solo onChange 소품 3번째 논거이유로 나의 모든 문제를 해결했다.

Autocomplete Change Reason은 다음과 같습니다.

• 흐릿하게 하다
• 분명한
• create Option(생성옵션)
• remove Option(삭제 옵션)
• 선택 옵션

그리고 이 소품의 두 번째 arg는 이미 업데이트된 (다중 선택) 값/s 목록을 제공합니다.

      onChange={(_event, newOptions, reason) => {
        setOptions(
          reason === 'clear' ? [] : [...newOptions.map((o) => Number(o))],
        );
      }}

선택한 값만 필요한 경우 값을 빈 개체로 설정하고 필요에 따라 옵션을 렌더링합니다.

<Autocomplete
    value={{}}
    onChange={handleSelectionChanged}
    options={options ?? []}
    getOptionLabel={x => (!x ? '' : x?.name ?? '')}
    renderInput={params => <TextField {...params} label="" />}
/>

개체를 사용하는 경우 다음 코드를 사용하여 필드를 지울 수 있습니다.

「」를 추가해 주세요.isOptionEqualToValue:

<Autocomplete
    style={{ width: 250 }}
    multiple
    id="checkboxes-tags-demo"
    options={list}
    isOptionEqualToValue={(option, newValue) => {
        return option.id === newValue.id;
    }}
    value={selected}
    onChange={(e, val) => handleSelected(e, val)}
    getOptionLabel={(option) => option.name}
    renderInput={(params) => (
        <TextField
            {...params}
            label="Add to Multiple"
            placeholder="Favorites" />
    )} />

함수에서 빈 어레이를 설정하기만 하면 지워집니다.

다음 방법을 사용해 보십시오.

onChange 메서드를 사용하여 세 번째 파라미터 reason을 전달하고 이유가 명확하면 클리어 텍스트와 비교한 후 이 기능을 실행합니다.

<Autocomplete
       onChange={(event, newValue, reason) => {             
            if (reason === 'clear') {
                console.log("Put your clear logic here: this condition executed when clear button clicked")
                setValue({ title: '', year: '' }) //for reset the value
                return
            }
        }}   
   />

이렇게 하기 위한 간단한 방법 중 하나는 다음과 같이 소품을 자동 완성하는 것입니다.

onChange={handleSkillChange}
inputValue=''
clearOnBlur={true}

• onChange는 이벤트핸들러입니다이러한 상태에는 값이 저장됩니다.
• inputValue='는 자동 완성 내부의 텍스트 필드가 항상 비어 있도록 하는 데 도움이 됩니다.
• clearOnBlur={true}는 포커스를 잃었을 때 자동 완성 컴포넌트의 값을 클리어하는 데 도움이 됩니다.

언급URL : https://stackoverflow.com/questions/59790956/material-ui-autocomplete-clear-value