How to enable/disable form elements in a list generated by a loop in ReactJS?-CodePudding

I have a loop in react to generate a list of input text and select, specifically two inputs and a select for each line

const getRow = (type, key, defaultValues = {}) => {
  return (
    <Row className="mb-3" key={type   key}>
                <Col xs={3}>
                    <Form.Group>
                        <Form.Label>Name</Form.Label>
                        <Form.Control
                            name={`${type}name${key}`}
                            className={`${type}name`}
                            defaultValue={defaultValues ? defaultValues.name : null}
                            type="text"/>
                    </Form.Group>
                </Col>
                <Col>
                    <Form.Group>
                        <Form.Label>Values</Form.Label>
                        <Form.Control
                            name={`${type}value${key}`}
                            className={`${type}value`}
                            defaultValue={defaultValues ? defaultValues.value : null}
                            type="text"/>
                    </Form.Group>
                </Col>
                <Col xs={3}>
                    <Form.Group>
                        <Form.Label>Type</Form.Label>
                        <Form.Select
                            name={`${type}type${key}`}
                            className={`${type}type`}
                            defaultValue={defaultValues ? defaultValues.type : null}
                        >
                            <option value="single">Single</option>
                            <option value="multi">Multi</option>
                            <option value="date">Date</option>
                        </Form.Select>
                    </Form.Group>
                </Col>
            </Row>

What I am trying to do is to have the second input text (value) disabled when I select Date in the type select. The tricky point is to disable the one in the same line.

How can I do that please?

CodePudding user response：

I don't know what data your key variables have? But i presume that they are unique as you named them key. You can create an object hold the state of the disabledElements like this:

{
  textvalueMyCoolKey: true,
  textValueMyThirdCoolKey: true 
}

Then check if your disabled element is in that object. So it could look like this. You didn't post much of your code so I can't give you a component that works, but this tells the idea:

const [disabledElements, setDisabledElements] = useState({});

const setDisabledText = (e, key) => {
  const value = e.target.value;
  const disabled = value === 'date';

  setDisabledElements({...disabledElements, [key]: disabled});
}

useEffect(() => {

}, [disabledElements]);

const getRow = (type, key, defaultValues = {}) => {
  return (
    <Row className="mb-3" key={type   key}>
      <Col xs={3}>
          <Form.Group>
              <Form.Label>Name</Form.Label>
              <Form.Control
                  name={`${type}name${key}`}
                  className={`${type}name`}
                  defaultValue={defaultValues ? defaultValues.name : null}
                  type="text"/>
          </Form.Group>
      </Col>
      <Col>
          <Form.Group>
              <Form.Label>Values</Form.Label>
              <Form.Control
                  name={`${type}value${key}`}
                  className={`${type}value`}
                  disabled={disabledElements[`${type}value${key}`]}
                  defaultValue={defaultValues ? defaultValues.value : null}
                  type="text"/>
          </Form.Group>
      </Col>
      <Col xs={3}>
          <Form.Group>
              <Form.Label>Type</Form.Label>
              <Form.Select
                  name={`${type}type${key}`}
                  className={`${type}type`}
                  onChange={(e) => setDisabledText(e, `${type}value${key}`)}
                  defaultValue={defaultValues ? defaultValues.type : null}
              >
                  <option value="single">Single</option>
                  <option value="multi">Multi</option>
                  <option value="date">Date</option>
              </Form.Select>
          </Form.Group>
      </Col>
  </Row>
  )
}

Also I presumed that you want to remove the disabled state from the text field if the user deselects the date option.