반응 재료의 값 가져오기-UI 자동 완성

반응 재료의 값 가져오기-UI 자동 완성

React Material-UI(https://material-ui.com/components/autocomplete/) 문서를 참조합니다.

데모 코드에서

    <Autocomplete
      options={top100Films}
      getOptionLabel={(option: FilmOptionType) => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
      )}
    />

동작은 알 수 있지만, 선택한 값을 어떻게 얻어야 할지 모르겠습니다.

예를 들어 I want to use the private works.onChange선택을 바탕으로 몇 가지 행동을 할 수 있도록 하기 위해 이것을 지지합니다.

추가해 보았다onChange={v => console.log(v)}

하지만v에는 선택한 값과 관련된 내용이 표시되지 않습니다.

패스를 사용하여 해결합니다.(event, value)에게onChange소품

<Autocomplete
    onChange={(event, value) => console.log(value)} // prints the selected value
    renderInput={params => (
        <TextField {...params} label="Label" variant="outlined" fullWidth />
    )}
/>

그onChangeprop는 여러 자동완료 값(@Steve Angello @ShwetaJ)에도 사용할 수 있습니다.그valuereturned는 선택한 모든 옵션 목록입니다.

const [selectedOptions, setSelectedOptions] = useState([]);

const handleChange = (event, value) => setSelectedOptions(value);

const handleSubmit = () => console.log(selectedOptions);

.
.
.

<Autocomplete
  multiple
  autoHighlight
  id="tags-outlined"
  options={top100Films}
  getOptionLabel={(option) => option.title}
  onChange={handleChange}
  filterSelectedOptions
  renderInput={(params) => (
    <TextField
      {...params}
      variant="standard"
    />
  )}
/>

.
.
.


<button onClick={handleSubmit}>Submit!</button>

사용할 수 있습니다.useState수취된 가치를 저장하다onChange값을 얻으려면:

const [selected, setSelected] = useState([]);


return (
    <Autocomplete
        onChange={(event, value) => setSelected(value)}
        renderInput={(params) => <TextField {...params} label="selected" />}
    />
);

TS의 작업 예를 다음에 나타냅니다.

  const tags = ["perimeter", "Algebra", "equation", "square root"];

  const handleInput = (e: React.SyntheticEvent, value: string[]) => {
    console.log(value);
  };

<Autocomplete
    multiple
    options={tags}
    onChange={handleInput}
    renderTags={(value: readonly string[], getTagProps) =>
    value.map((option: string, index: number) => (
            <Chip
                variant="outlined"
                label={option}
                {...getTagProps({ index })}
             />
            ))
           }
           renderInput={(params) => (
            <TextField
               {...params}
               variant="filled"
               label="Tags"
               placeholder="select question tags"
           />
        )}
   />

============ 출력 ===============

언급URL : https://stackoverflow.com/questions/58666189/getting-the-value-in-the-react-material-ui-autocomplete