web-dev-qa-db-ja.com

material-ui Autocomplete TextFieldにプログラムで値を設定する

私のReact appには、ドロップダウンリストから値を取得できる入力があります。そのためには、material-ui AutocompleteおよびTextFieldコンポーネントを使用します。

質問：ドロップダウンリストから選択せずにボタンをクリックしてプログラムで入力値を設定するにはどうすればよいですか？たとえば、例から「The Godfather」を設定したいのですが、この値は入力で視覚的に確認できるはずです。

ここにコードサンドボックスの例

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

MUIのAutocompleteコンポーネントから呼び出される変更ハンドラーをテストしようとしている場合：

SetupTests.jsファイル

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

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

テストファイルで：

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)

その他の例については、 ライブラリのテスト を確認してください

0
Devin Clark