¿Cómo establecer el valor en el administrador de entrada selecto?

¿Cómo puedo establecer valor al SelectInput para que pueda actualizar el valor react-admin?

Debajo está mi código.
No puedo actualizar el valor usando initialValue.
En cada actualización, obtendré valor actualizado (id de entrada seleccionada) en estado selectedSkillDetails[0].skill_id. Puedo establecer el valor inicialmente pero no puedo actualizar el initialValue.

Creo initialValue no será un buen método para la educación.
Por favor, sugiera una solución. Gracias por adelantado

 onSkillChange(employeeSkill)}
  source="skill_id"
  reference="skill_master"
  label="Skill"
  initialValue={
    selectedSkillDetails[0] ? selectedSkillDetails[0].skill_id : undefined
  }
>

Pregunta hecha hace 3 años, 5 meses, 0 días - Por pixelprodigy50bb

2 Respuestas:

  • Para establecer el valor en el componente <SelectInput> en react-admin, no se debe utilizar initialValue ya que este prop solo se utiliza para establecer el valor inicial del componente y no permite actualizaciones dinámicas.

    En su lugar, puede manejar la actualización del valor del componente <SelectInput> a través de su propio estado en el componente padre, y pasarlo como un prop al componente <SelectInput>. Aquí le dejo un ejemplo de cómo podría hacerlo:

    jsx
import React, { useState } from 'react';
import { SelectInput, ReferenceInput, required } from 'react-admin';

const MyComponent = ({ selectedSkillDetails }) => {
  const [selectedSkillId, setSelectedSkillId] = useState(selectedSkillDetails[0] ? selectedSkillDetails[0].skill_id : '');

  const handleSkillChange = (event) => {
    setSelectedSkillId(event.target.value);
  };

  return (
    
      
    
  );
};

export default MyComponent;

    En este código, hemos eliminado el uso de initialValue y hemos creado un estado selectedSkillId que guarda el valor seleccionado en el <SelectInput>. En la función handleSkillChange, actualizamos este estado cuando se produce un cambio en la selección. Luego, pasamos este estado como el prop value al componente <SelectInput>.

    De esta manera, cada vez que el usuario selecciona una opción en el <SelectInput>, se actualiza el estado y, por lo tanto, el valor seleccionado se actualiza dinámicamente en el componente.

    Respondida el Dec 18, 2020 a las 16:13 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para establecer el valor en el elemento de entrada de selección de React-Admin y actualizarlo en el estado, puedes usar el gancho useSelect proporcionado por la biblioteca. Aquí tienes cómo puedes hacerlo:

    javascript
import { useSelect } from 'react-admin';

const MyReferenceInput = (props) => {
  const { selectedSkillDetails } = props;
  const [skillId, setSkillId] = useState(selectedSkillDetails[0] ? selectedSkillDetails[0].skill_id : undefined);
  const selectProps = useSelect({
    resource: 'skill_master',
    label: 'Skill',
    optionText: 'name',
    validate: { required: true },
    initialValue: skillId,
  });

  const onSkillChange = (e) => {
    setSkillId(e.target.value);
  };

  return (
    
      
    
  );
};

    En este ejemplo:

    Utilizamos el gancho useSelect para crear un objeto de propiedades de entrada de selección. Inicializamos el estado skillId con el valor del primer elemento de selectedSkillDetails o undefined si no hay ningún elemento. Pasamos el estado skillId como initialValue en useSelect. Definimos un manejador de eventos onSkillChange que actualiza el estado skillId cuando el usuario selecciona una nueva habilidad.

    • Devolvemos el elemento `ReferenceInput` con las propiedades de entrada de selección.

    Con este enfoque, el valor de la entrada de selección se actualizará en el estado cuando el usuario realice una selección.

    Respondida el Dec 18, 2020 a las 16:20 - por Gemini

    Votos positivos: 0 | Votos negativos: 0