Программно установить значение в Material-UI Autocomplete TextField - PullRequest
Новая
       82

Программно установить значение в Material-UI Autocomplete TextField

2 голосов
/ 17 января 2020

В моем приложении React у меня есть вход, который может принять значение из выпадающего списка. Для этой цели я использую компоненты автозаполнения и текстового поля Material-UI.

Вопрос: как программно установить значение ввода, нажав на кнопку, не выбирая из выпадающего списка? Например, я хочу установить «Крестный отец» из примера, и это значение должно быть визуально видно во входных данных.

Пример кодов и ящиков здесь 

import React from "react";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { TextField, Button } from "@material-ui/core";

export default function ComboBox() {
  const handleClick = () => {
    // set value in TextField from dropdown list
  };

  return (
    <React.Fragment>
      <Autocomplete
        options={top100Films}
        getOptionLabel={option => option.title}
        style={{ width: 300 }}
        renderInput={params => (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            fullWidth
          />
        )}
      />
      <Button onClick={handleClick}>Set value</Button>
    </React.Fragment>
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 }
];

1 Ответ

5 голосов
/ 17 января 2020

Вы можете сохранить желаемое значение в состоянии и передать его автозаполнению компонента.

Импорт useState : 

   import React, { useState } from 'react';

с использованием useState : 

   const [val,setVal]=useState({})

измените значение при нажатии кнопки 

  const handleClick = () => {
    setVal(top100Films[0]);//you pass any value from the array of top100Films
   // set value in TextField from dropdown list
 };

и передайте это значение компоненту при рендеринге 

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

      />
    )}
  />
...