如何使用react和typescript根據formfield的值將react state設置為一些初始state？

Question

我想根據使用反應的某些條件將 state 設置為初始 state。

我想做什么？

我有一個名為 active 的復選框。 如果用戶檢查活動字段，則名為活動的表單字段應設置為基於 select 菜單中選擇的選項的值。

基本上就像下面一樣，

如上圖所示，檢查字段將具有名為“活動”的表單字段。 如果未選中，則 select 菜單不可見，並且名稱為 active 的表單字段將設置為值“none”。

如果選中，則 select 菜單可見，如果 type2 值，則名稱為 active 的表單字段將設置為“type2”，如果從菜單中選擇了 type1 選項，則將設置為“type1”。

下面是我的代碼，

const Parent = () => { 
    const [isChecked, setIsChecked] = React.useState(false);
    return (
        <Switch
            checked={isChecked}
            disabled={mode === 'edit'}
            onChange=(() => {
                if (isChecked) {
                    setIsChecked(false);
                    form.setFieldValue('active', 'none');
                } else {
                    setIsChecked(true);
                }
            }
        />
    );
}


    
const Child = () => {
    
    const handleOnchange = (selectedType, form) => {
        if (selectedType === 'type1') {
            form.setFieldValue('active', 'type1');
        } else if (selectedType === 'type2') {
            form.setFieldValue('active', 'type2');
        } else {
            //do nothing
        }
    }
    const typeOptions = () => {
        label: 'type1', name:'type1',
        label: 'type2', name: 'type2',
    }
    return ( 
        <FormField fieldId="type">
            {({ field, form }: FieldProps) => (
                <Select 
                    options={typeOptions}
                    onChange=(()=> handleOnChange(type,form));
                    placeholder="select"
                    value=value={typeOptions.filter(option => option.value === 
                        field.value)}
                 /> 
             ))}
         </FormField>
     );
 }

上面的代碼有效。 但在創建和編輯模式中使用相同的父組件。 在編輯模式下，如果活動字段值在創建模式下是 type1 或 type2，我希望檢查活動字段。如果在創建模式下活動字段值設置為 none，則取消選中。

基本上在編輯模式下我想檢索活動字段的值。 因為我在開關組件檢查屬性上使用 isChecked state 並且當組件卸載時，它將設置為 false ，因此即使在創建模式下檢查了活動字段，也不會在編輯模式下檢查活動字段。

我嘗試過類似下面的方法，

const Parent = () => {
    const active = formikBag.values('active');
    const checked = active === 'type1' || 'type2';
    const [isChecked, setIsChecked] = React.useState(checked);
    return(
        <Switch
            disabled={mode === edit}
            checked={isChecked} // true | active is not assigned to boolean | 
            //undefined
            onChange = (() => {
                setIsChecked={false} // false is not assignable to 
                //setStateAction(true | active)
            } 
        />
    );
}

但我得到像 true | 這樣的錯誤活動未分配給 boolean | undefined false 不可分配給 setStateAction(true | active)

不確定是什么原因造成的。 有人可以幫我解決這個問題。 謝謝。

或者換句話說，如果在下面的語句中活動變量是“type1”或“type2”，我如何將檢查變量設置為 true

const checked = active === 'type1' || active === 'type2'

Answer 1

有很多方法可以設置它，但這就是我所做的。

我們將在表單中包含三個字段：

1. mode ：“查看”或“編輯”
2. checked ： true或false
3. active ：“type1”、“type2”或“none”

type ValidTypes = "type1" | "type2" | "none";

interface FormState {
  mode: "view" | "edit";
  checked: boolean;
  active: ValidTypes;
}

我依靠表格 state 來滿足我們需要的一切，所以沒有更多useState 。 一切都可以從表格 state 訪問。

formik帶有一個內置的幫助器 function handleChange ，我們可以使用它，只要元素的“名稱”屬性設置為字段的名稱。 我們希望對checked的字段進行額外的事件處理，因為我們希望清除active的值並在未選中復選框時將其設置為none 。 所以我們調用handleChange但我們也可能調用setFieldValue 。

我正在使用material-ui中的Checkbox組件，下拉列表只是常規的select元素。 我在材料版本上遇到了麻煩。

RenderForm組件將form的所有屬性作為props獲取。 我使用的是values 、 handleChange和setFieldValue 。

const RenderForm = ({ values, handleChange, setFieldValue }: FormikProps<FormState>) => {
  
  // for development purposes, log the state of `active`
  console.log("active: " + values.active);

  // show options if in edit mode or if checked is true
  const isShowOptions = values.mode === "edit" || values.checked;

  return (
    <Form>
      <div>
        {"Mode: "}
        <select name="mode" value={values.mode} onChange={handleChange}>
          <option value="view">View</option>
          <option value="edit">Edit</option>
        </select>
      </div>
      <div>
        <Checkbox
          name="checked"
          value={values.checked}
          onChange={(event, isChecked) => {
            // want to handle change for this field, but also want to
            // set `active` to `none` when unchecking
            handleChange(event);
            if (!isChecked) {
              setFieldValue("active", "none");
            }
          }}
        />
        {isShowOptions && ( // render this field conditionally
          <select name="active" value={values.active} onChange={handleChange}>
            <option value="none">Select</option>
            <option value="type1">Type 1</option>
            <option value="type2">Type 2</option>
          </select>
        )}
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </Form>
  );
};

const MyForm = () => {
  return (
    <Formik
      initialValues={{ mode: "view", active: "none", checked: false }}
      onSubmit={console.log}
      component={RenderForm}
    />
  );
};

export default MyForm;