[英]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.