web-dev-qa-db-fra.com

Valeur définie par programme dans Material-ui Autocomplete TextField

Dans mon React app, j'ai une entrée qui pourrait prendre la valeur de la liste déroulante. Pour cela, j'utilise les composants material-ui Autocomplete et TextField.

Question: comment puis-je définir par programmation une valeur d'entrée en cliquant sur le bouton sans choisir dans la liste déroulante? Par exemple, je veux définir "Le Parrain" à partir de l'exemple et cette valeur doit être vue visuellement dans l'entrée.

Exemple de codesandbox ici

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 }
];
javascriptreactjsautocompletematerial-uitextfield
3
Sergey Gubarev

Si vous essayez ici de tester un gestionnaire de modifications appelé à partir du composant Autocomplete de MUI:

Dans votre fichier setupTests.js

import '@testing-library/jest-dom/extend-expect'

document.createRange = () => ({
  setStart: () => {},
  setEnd: () => {},
  commonAncestorContainer: {
    nodeName: 'BODY',
    ownerDocument: document
  }
})

Dans votre fichier de test:

import { render, fireEvent } from '@testing-library/react'

...

const { getByRole } = render(<MyComponentWithAutocomplete />)

const autocomplete = getByRole('textbox')

// click into the component
autocomplete.focus()

// type "a"
fireEvent.change(document.activeElement, { target: { value: 'a' } })

// arrow down to first option
fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })

// select element
fireEvent.keyDown(document.activeElement, { key: 'Enter' })

expect(autocomplete.value).toEqual('Arkansas')
expect(someChangeHandler).toHaveBeenCalledTimes(1)

Pour plus d'exemples, consultez le tests dans la bibliothèque

0
Devin Clark