當Select在組件中時，如何將Select值傳遞給ReactForm？

我正在使用 Typescript 開發一個 React 應用程式。我創建了一個多步驟表單。每個表單頁面都是它自己的組件，欄位是單獨的組件。我可以查看來自文本欄位 onSubmit 的資料，但是，我不知道如何對 Select 欄位執行相同操作，因為該組件具有自己的 onChange 屬性。

這些是主表單的片段。欄位已更改。讓我們假設“狀態”是一個下拉串列：

type FormData = {
  firstName: string;
  lastName: string;
  state: string;
};

const INITIAL_DATA: FormData = {
  firstName: "",
  lastName: "",
  state: "",
};

掛鉤獲取用戶資料

  const [data, setData] = useState(INITIAL_DATA);

  function updateFields(fields: Partial<FormData>) {
    setData((prev) => {
      return { ...prev, ...fields };
    });
  }

這就是我獲得所有步驟的方式。注意：我清理了不相關的代碼。這僅關注獲取資料的部分：

function getStepsContent(step: number) {
    switch (step) {
      case 0:
        return (
          <Personal
            {...data}
            updateFields={updateFields}
          />
        );
      case 1:
        return (
          <Address
            {...data}
            updateFields={updateFields}
          />
        );
      default:
        return (
          <Personal
            {...data}
            updateFields={updateFields}
          />
        );
    }
  }

在個人表單頁面上，我有：

type PersonalData = {
  firstName: string;
  lastName: string;
  state: string;
}

type PersonalProps = PersonalData & {
  updateFields: (fields: Partial<PersonalData>) => void
}

這是表單域的示例。注意：這是我拉入自定義欄位組件的地方。StyledTextField（使用 MUI 文本欄位）提取資料，StyledSelectField（使用 MUI 選擇欄位）不會：

<StyledTextField 
  label="First Name"  
  name="firstName"
  value={firstName}
  onChange={e => updateFields({firstName: e.target.value})}
/>

<StyledSelect
  label="State"
  placeholder="Select One"
  name="state"
  data={state}
  onChange={e => updateFields({state: e.target.value})}
/>

這是我的選擇組件。它確實抓取資料，但在提交時不會將其推送到表單：

interface IData {
  id: number;
  name: string;
}

interface StyledSelectProps {
  id: string;
  label: string;
  placeholder: string;
  name: string;
  onChange?: (event: SelectChangeEvent) => void;
  data: IData[];
}

export default function StyledSelect({
  id,
  label,
  placeholder,
  name,
  onChange,
  data,
}: StyledSelectProps) {

  const [value, setValue] = useState("");

  const handleChange = (event: SelectChangeEvent) => {
    setValue(event.target.value);
    console.log(event.target.value);

  };

  return (
    <div>
      <FormControl fullWidth>
        <InputLabel htmlFor={id}>
          {label}
        </InputLabel>

        <Select
          id={id}
          value={value}
          label={id}
          name={name}
          variant="standard"
          defaultValue=""
          renderValue={value !== "" ? undefined : () => placeholder}
          onChange={handleChange}
        >
          {data.map(({ id, name }) => (
            <MenuItem key={id} value={name}>
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

我認為主要問題是我在 Select 上有一個 onChange，但還需要在單個表單頁面上做一個 onChange。另外，因為我有通過 useState 傳入的值，所以我無法在單個表單頁面上呼叫它。

任何幫助和指導將不勝感激。

uj5u.com熱心網友回復：

在您的 StyledSelect 上，您應該從 props 呼叫 onChange 以讓您updateFields呼叫 fn。使用以下內容更新 StyledSelect 組件中的 handleChange fn：

const handleChange = (event: SelectChangeEvent) => {
    setValue(event.target.value);
    onChange(event)
};

標籤：反应打字稿形式选择成分

上一篇：打字稿-使用物件文字來選擇/索引其他型別

下一篇：型別'(email:string)=>void'不可分配給型別'(email:IEmail)