Estoy trabajando con varios Autocompletar componentes MUI y actualmente estoy intentando escribir un evento "genérico" controlador que llamará a useReducer hook para almacenar el estado.

El problema es que en los documentos Autocomplete, la función onChange tiene el siguiente aspecto:

function(event: object, value: T | T[], reason: string) => void

Estoy tratando de obtener el nombre de un campo del objeto de evento (para determinar qué Autocompletar se está cambiando), pero event.target.name y event.currentTarget.name no funcionan.

¿Hay alguna forma de recuperar el nombre de un componente que se cambió?

0
Karen 26 jun. 2020 a las 07:29

2 respuestas

La mejor respuesta

La razón por la que no está definido es que event.target en onChange apunta a li pero el Autocompletar MaterialUi agregará name al div exterior. Entonces, no hay un camino directo. Puede usar un ref y usar getAttribute para obtener el nombre.

Edit Material autoselect get name attribute

Fragmento de código

export default function ComboBox() {
  const ref0 = useRef();

  return (
    <Autocomplete
      id="combo-box-demo"
      ref={ref0}
      name="movies"
      options={top100Films}
      getOptionLabel={option => option.title}
      onInputChange={(e, v, r) => {
        const ev = e.target;
        if (r === "reset") console.log(ev, v, r);
      }}
      onChange={(e, v, r) => {
        console.log(ref0.current.getAttribute("name"));
      }}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField
          name="auto-input"
          {...params}
          label="Combo box"
          variant="outlined"
        />
      )}
    />
  );
}
1
gdh 26 jun. 2020 a las 05:20

Para Autocompletar las obras de selección única y múltiple basadas en múltiples apoyos:

onChange={(_, newValue) => props.multiple ?
          props.onChangeMultiSelect!(newValue as T[]) : props.onChange!(newValue as T)}

Las funciones para ambos son:

onChangeMultiSelect={newValue => {
          if (newValue) {
            // here is the new value
          }
        }}

onChange={newValue => {
        if (newValue) {
          // here is the new value
        }
      }}
0
Dlucidone 26 jun. 2020 a las 04:59