Soy nuevo en React y trato de deshabilitar un campo de entrada cuando el valor desplegable se selecciona como "No" y lo habilito cuando Yes . Estoy usando React, Next Js, React-bootstrap y formik.
function Input(){ const [disabled, setDisabled] = useState(false); const [radioValue, setRadioValue] = React.useState(''); function handleClick() { if (radioValue === "Yes") { console.log('Text Enabled') } else { setDisabled(!disabled); console.log('Text disabled') } } return( <div> <Form> <Form.Group controlId="usage_ppe" as={Col}> <Form.Label className="required-field font-Montserrat">{getTranslatedText('Usage')}</Form.Label> <Col className="p-0"> <Dropdown className="px-4 py-2 bg-green-1" as="select" value={radioValue} onChange={e => { setRadioValue(e.target.value); }} > <option value="Select">Select</option> <option value="Yes">Yes</option> <option value="No">No</option> </Dropdown> </Col> {errors.usage_ppe && touched.usage_ppe && <p>{errors.usage_ppe}</p>} </Form.Group> <Form.Group controlId="usage_of_ppe_byWorkers" as={Col} disabled={disabled} onClick={handleClick} /> <Form.Label className="font-Montserrat" >{getTranslatedText('If Yes, Enable Input')}</Form.Label> <Form.Control type="text" className={errors.usage_of_ppe_byWorkers && touched.usage_of_ppe_byWorkers && 'has-error'} name="usage_of_ppe_byWorkers" placeholder="If Yes, Usage of PPE by STP" onChange={handleChange} onBlur={handleBlur} value={values.usage_of_ppe_byWorkers || ""} /> {errors.usage_of_ppe_byWorkers && touched.usage_of_ppe_byWorkers && <p>{errors.usage_of_ppe_byWorkers}</p>} </Form.Group> </Form> </div> ) } ¿Dónde me equivoco aquí? También registra el valor Yes en la función handleClick . Cuando seleccionamos el valor desplegable como Yes , no deshabilitará la entrada de texto que tengo al lado. Estoy confundido acerca de mapear el valor. No entiendo ¡Qué estoy haciendo mal aquí!
¡Gracias por adelantado!
Form.Group no está diseñado para funcionar como un componente de entrada independiente. Desea tener más entradas dentro de un controlador único, y para esto, con el arranque de reacción, usa la etiqueta fieldset.
ejemplo con deshabilitar prop con deshabilitar:
<fieldset disabled={disabled}> <Form.Group className="mb-3"> <Form.Label htmlFor="disabledTextInput">Disabled input</Form.Label> <Form.Control id="disabledTextInput" placeholder="Disabled input" /> </Form.Group> <Form.Group className="mb-3"> <Form.Label htmlFor="disabledSelect">Disabled select menu</Form.Label> <Form.Select id="disabledSelect"> <option>Disabled select</option> </Form.Select> </Form.Group> <fieldset/> También puede intentar agregar los disabled directamente dentro de la etiqueta Form.Control
el código completo debe ser:
<Form.Group controlId="usage_of_ppe_byWorkers" as={Col} disabled={disabled} onClick={handleClick} /> <Form.Label className="font-Montserrat" >{getTranslatedText('If Yes, Enable Input')}</Form.Label> <Form.Control type="text" className={errors.usage_of_ppe_byWorkers && touched.usage_of_ppe_byWorkers && 'has-error'} name="usage_of_ppe_byWorkers" placeholder="If Yes, Usage of PPE by STP" onChange={handleChange} onBlur={handleBlur} value={values.usage_of_ppe_byWorkers || ""} disabled={disabled} /> {errors.usage_of_ppe_byWorkers && touched.usage_of_ppe_byWorkers && <p>{errors.usage_of_ppe_byWorkers}</p>} </Form.Group>Gracias