Tengo un componente de formulario dinámico. necesito deshabilitar el botón de enviar cuando los campos de entrada están vacíos. sin embargo, la función validateResult no devuelve falso.
import cn from "classnames"; import styles from "./DynamicForm.module.sass"; import { Card } from "../Card"; import { TextInput } from "../TextInput"; import { Button } from "../Button"; type DynamicInput = StringInput | NumberInput; interface StringInput { type: "text"; name: string; label: string; value?: string; placeholder: string; min: number; max: number; } interface NumberInput { type: "number"; name: string; label: string; value?: number; placeholder: string; min: number; max: number; } interface DyanamicFormResult { [name: string]: any; } interface DynamicFormProps { data: DynamicInput[]; onSubmit: (result: DyanamicFormResult) => void; } export const inputs: DynamicInput[] = [ { type: "text", name: "Parameter1", label: "Parameter1", placeholder: "placeholder1", min: 2, max: 17, }, { type: "number", name: "Parameter2", label: "Parameter2", placeholder: "placeholder2", min: 4, max: 17, }, ]; export const DynamicForm: React.FC<DynamicFormProps> = ({ data, onSubmit }) => { const [result, setResult] = React.useState<DyanamicFormResult>({}); const onClick = () => { onSubmit(result); }; const handleChange = (attribName: string, value: any) => { setResult({ ...result, [attribName]: value }); }; const validateResult = (res) => { if (inputs[res] === 0) { return false; } return true; }; return ( <div> <Card title="Header" classTitle="title-blue"> {inputs.map((input) => ( <TextInput key={input.name} className={cn(styles.txt, TextInput)} type={input.type} name={input.name} value={result[input.name] || input.value} label={input.label} placeholder={input.placeholder} onChange={(event: any) => handleChange(input.name, event.target.value) } /> ))} <Button className={cn(styles.btn, Button)} label="Submit" variant="button" small={true} onClick={onClick} disabled={!validateResult(inputs)} /> </Card> </div> ); };Solo escribo este código sin ejecutarlo, pero debería funcionar, solo arréglelo si tiene un error.
import cn from "classnames"; import styles from "./DynamicForm.module.sass"; import { Card } from "../Card"; import { TextInput } from "../TextInput"; import { Button } from "../Button"; type DynamicInput = StringInput | NumberInput; interface StringInput { type: "text"; name: string; label: string; value?: string; placeholder: string; min: number; max: number; } interface NumberInput { type: "number"; name: string; label: string; value?: number; placeholder: string; min: number; max: number; } interface DyanamicFormResult { [name: string]: any; } interface DynamicFormProps { data: DynamicInput[]; onSubmit: (result: DyanamicFormResult) => void; } export const inputs: DynamicInput[] = [ { type: "text", name: "Parameter1", label: "Parameter1", placeholder: "placeholder1", min: 2, max: 17, }, { type: "number", name: "Parameter2", label: "Parameter2", placeholder: "placeholder2", min: 4, max: 17, }, ]; export const DynamicForm: React.FC<DynamicFormProps> = ({ data, onSubmit }) => { const [result, setResult] = React.useState < DyanamicFormResult > {}; const [isDisable, setIsDisable] = React.useState < Boolean > false; const onClick = () => { onSubmit(result); }; const handleChange = (attribName: string, value: any) => { setResult({ ...result, [attribName]: value }); }; useEffect(() => { const listOfValues = Object.values(result); const emptyList = listOfValues.filter((item) => item == ""); setIsDisable(emptyList.length !== 0); }, [result]); const validateResult = (res) => { if (inputs[res] === 0) { return false; } return true; }; return ( <div> <Card title="Header" classTitle="title-blue"> {inputs.map((input) => ( <TextInput key={input.name} className={cn(styles.txt, TextInput)} type={input.type} name={input.name} value={result[input.name] || input.value} label={input.label} placeholder={input.placeholder} onChange={(event: any) => handleChange(input.name, event.target.value) } /> ))} <Button className={cn(styles.btn, Button)} label="Submit" variant="button" small={true} onClick={onClick} disabled={isDisable} /> </Card> </div> ); };Cambie la función validateResult a esto:
const validateResult = () : boolean => { if (inputs.some(input => !result[input.name])){ return false; } return true; }; Ahora no necesitará pasar ningún argumento a la función, por lo que el accesorio disabled se volverá así:
<Button disabled={!validateResult()} />