當輸入字段為空時禁用按鈕reactjs

Question

我有一個動態表單組件。 當輸入字段為空時，我需要禁用提交按鈕。 但是validateResult函數不會返回 false。

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>
  );
};

Answer 1

我只是編寫這段代碼而不運行它，但如果有錯誤它應該可以修復它。

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>
  );
};

Answer 2

將validateResult函數更改為：

const validateResult = () : boolean => {
 if (inputs.some(input => !result[input.name])){
  return false;
 }
 return true;
};

現在您不需要將任何參數傳遞給函數，因此disabled的道具將變成這樣：

<Button
  disabled={!validateResult()}
/>