繁体   English   中英

根据下拉值禁用 React 和 Nextjs 中的文本/输入字段

[英]Disable text/input field in React & Nextjs depending on Dropdown Value

我是 React 的新手,当下拉值被选为“No”时尝试禁用输入字段,并在Yes时启用。 我正在使用 React、Next Js、React-bootstrap 和 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>
)

}

我哪里出错了,它还会在handleClick function 中记录值Yes ,当我们将 select 下拉值设为Yes时,它不会禁用我旁边的文本输入。 我对映射值感到困惑。 我不明白我在这里做错了什么!

提前致谢!

Form.Group 不打算用作独立的输入组件。 你想在一个独特的 controller 中有更多的输入,为此你可以使用 fieldset 标签来使用 react bootstrap。

disable prop with disable 示例:

    <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/>


您也可以尝试直接在 Form.Control 标签中添加disabled

完整代码应该是:


   <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>

谢谢

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM