“kontrolliertes Autocomplete Material UI” Code-Antworten

kontrolliertes Autocomplete Material UI

<Controller
  defaultValue={null}
  name={"name"}
  control={control}
  rules={{
    required: true, // for mandatory field
    validate: (data) => { // checking whether array is empty or not
    	if(data.length === 0) return false 
    }}
  }
  render={({value, name, onChange}) => (
  	<Autocomplete
      value={value}
      multiple
      name={name}
      size="small"
      id="status"
      options={options}
      disableCloseOnSelect
      onChange={(e, v) => {onChange(v);} }
      getOptionLabel={(option) => option.name}
      renderOption={(props, option, { selected }) => (
        <li {...props}>
          <Checkbox
          icon={icon}
          checkedIcon={checkedIcon}
          style={{ marginRight: 8 }}
          checked={selected}
        />
        	{option.name}
        </li>
      )}
      style={{ width: 250 }}
      renderInput={(params) => (
      	<TextField {...params} /* error={errors.name ? true : false} */ variant="outlined" label="Select" />
      )}
    />
  )}
/>
Himanshu Makwana

Materials UI Autocomple Wie wird die erste Option als Standard ausgewählt

<Autocomplete
    id="id"
    options={Options}
    getOptionLabel={option => option.label}
    defaultValue={Options.find(v => v.label[0])} 
    renderInput={params => (
      <TextField {...params} label="label" variant="outlined" />
    )}
  />
Jash_World

So setzen Sie dynamische Autocomplete mit Material UI

 import React, { useState } from 'react';
using useState:

   const [val,setVal]=useState({})
changin value on click of button

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

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

      />
    )}
  />
Pleasant Pintail

Ähnliche Antworten wie “kontrolliertes Autocomplete Material UI”

Fragen ähnlich wie “kontrolliertes Autocomplete Material UI”

Weitere verwandte Antworten zu “kontrolliertes Autocomplete Material UI” auf JavaScript

Durchsuchen Sie beliebte Code-Antworten nach Sprache

Durchsuchen Sie andere Codesprachen