如何使用react和typescript根据formfield的值将react state设置为一些初始state？

Question

i want to set state to initial state based on some condition using react.

what i am trying to do?

i have a checkfield named active. if user checks active field then the form field named active should be set to value which is based on option selected in the select menu.

basically it is like below,

so as shown in above picture, the check field will have form field named 'active'. if it is unchecked then the select menu is not visible and the form field with name active will be set with value 'none'.

if it is checked, the select menu is visible and the form field with name active will be set to 'type2' if the type2 valueit will be set to 'type1' if the type1 option is selected from menu.

below is my code,

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

The above code works. but the same Parent component used in create and edit mode. when in edit mode i want the active field to be checked if the active field value is type1 or type2 in create mode.and unchecked if the active field value is set to none in create mode.

basically in edit mode i want to retrieve the value of active field. since i am using isChecked state on switch component checked prop and when the component unmounts it will be set to false and hence the active field is unchecked in edit mode even if it is checked in create mode.

i have tried something like below,

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

but i get errors like true |active is not assigned to boolean | undefined false is not assignable to setStateAction(true | active)

Not sure what is causing this. could someone help me with this. thanks.

Or in other words, how can i set checked variable to true if active variable is 'type1' or 'type2'in the below statement

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

Answer 1

There are a lot of ways to set this up, but here's what I did.

We are going to have three fields in the form:

1. mode : "view" or "edit"
2. checked : true or false
3. active : "type1", "type2", or "none"

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

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

I am relying on the form state for everything that we need, so there is no more useState . Everything can be accessed from the form state.

formik comes in with a built-in helper function handleChange that we can use, as long at the element has the "name" property set to the name of the field. We want extra event handling on the checked field because we want to clear the value of active and set it to none when the checkbox is unchecked. So we call handleChange but we also maybe call setFieldValue .

I am using the Checkbox component from material-ui and the dropdowns are just regular select elements. I had trouble with the material version.

The RenderForm component gets all of the properties of form as props . The ones that I am using are values , handleChange , and 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;