Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Setting a Form DataSet Value without OnChange Event

I am working on an edit form that I need some help figuring out how to automatically set a value on. The initial values are set from an API call to our DB.

Here is the situation. The form allow the user to change the "Type" of the item from a dropdown, which sets the typeId to a value of 1-5. If initially item had a typeId of 5, the form does not display the Toggle Switch or Radio Group, because the item would not have a set value ("null") for those fields. Once a user changes the type to something other than 5, the fields get displayed.

If the user changes the type to typeId of 1-4 the input fields will be displayed, so I would like to automatically set the correctable to "0" and tagCriteria to "1000". As it is right now, the user has to toggle the switch or select a different radio button in order to trigger the onChange event to set the values, otherwise the values are not set. Can someone help me figure out a way to set those values automatically?

HERE IS MY BASIC FORM AND INPUT CHANGE

const [values, setValues] = React.useState({} as any);

const handleInputChange = e => {
  const { name, value } = e.target;
  setValues({
    ...values,
    [name]: value // allows value as typed
  });
};


<form>
 <Input
    type='text'
    onChange={handleInputChange}
    name='name'
    label='Name'
    value={values.name}
    error={errors.name}
 />
 <Dropdown
    onChange={handleInputChange}
    label='Type'
    name='typeId'
    value={values.typeId}
    prompt='Select A Type...'
    url={TypesURL}
  />
 {(() => {
  if (values.typeId != 5) {
  <ToggleSwitch
      onChange={handleInputChange}
      label1='No'
      label2='Yes'
      name='correctable'      
      defaultValue=0
      value={values.correctable}
   />
   <RadioGroup
      onChange={handleInputChange}
      items={radioItems}
      name='tagCriteria'
      defaultValue='1000'
      value={values.tagCriteria}
  />
 }
 })()}  

</form>

Ultimately, I eventually need to set the values to ‘correctable = 0, tagCriteria = null’ and the tagCriteria Radio Group would be disabled. This is because if the item is not correctable (0), then it has no tag criteria. Then when the user toggles correctable to 1, then Radio Group would become enabled and the tagCriteria value would automatically set to a default of "1000", but if I can just find a way to get both just set to a default, I am sure I could figure out the rest.

Tags:

2

Answers


  1. 0

    without OnChange Event

    but…

    If the user changes the type to typeId of 1-4 the input fields will be displayed, so I would like to automatically set the correctable to "0" and tagCriteria to "1000".

    So the change event is already occurring. Here:

     <Dropdown
   onChange={handleInputChange}
   label='Type'
   name='typeId'
   value={values.typeId}
   prompt='Select A Type...'
   url={TypesURL}
/>

    If, when the user makes this change, you want to perform an operation then you would perform that operation in this function:

    const handleInputChange = e => {
  const { name, value } = e.target;
  setValues({
    ...values,
    [name]: value // allows value as typed
  });
};

    For example, if you want to set specific values when name is 'typeId' and value is in the range of 1 through 4 then it might look something like this:

    const handleInputChange = e => {
  const { name, value } = e.target;
  const newValues = {
    ...values,
    [name]: value
  };
  if (name === 'typeId' && [1,2,3,4].includes(value)) {
    newValues.correctable = 0;
    newValues.tagCriteria = '1000';
  }
  setValues(newValues);
};

    Basically, your goal to not use onChange seems a bit misguided when you want this operation to take place when the user changes the typeId value. Simply set those default values when that happens.

    As a potential alternative, you could also just set those defaults initially in the state:

    const [values, setValues] = React.useState({
  correctable: 0,
  tagCriteria: '1000'
} as any);
    Login or Signup to reply.
  2. 0

    It sounds like you want to automatically set values in your form when a user changes the typeId from 5 to another value (1-4). To achieve this, you can use a useEffect hook that watches for changes in the typeId state and updates the values of correctable and tagCriteria accordingly

    React.useEffect(() => {
  if (values.typeId && values.typeId >= 1 && values.typeId <= 4) {
     setValues(prevValues => ({
        ...prevValues,
        correctable: 0,
        tagCriteria: '1000',
     }));
  } else if (values.typeId === '5') {
     setValues(prevValues => ({
       ...prevValues,
       correctable: null,
       tagCriteria: null,
      }));
 }
}, [values.typeId]);

    This approach should automatically set and manage the values based on the user’s interaction with the dropdown without additional user input. Let me know if this helps or if you need further assistance!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search