React js：如何根据复选框值禁用文本输入？答案

【问题标题】：React js: How to disable text input based on a checkbox value?React js：如何根据复选框值禁用文本输入？
【发布时间】：2021-06-24 17:30:36
【问题描述】：

我正在创建一个用于向在线购物网站添加新“项目”的表单。在此表单上，有一个测试输入框，用户应在其中包含他们正在添加的项目的序列号。在它的正下方有一个复选框，如果选中，它将自动分配一个序列号，以防用户不想使用自定义序列号。因此，如果单击或选中复选框（true），则应禁用文本输入框。下面是我使用的代码。首次打开页面时，如果您第一次单击复选框，则文本框将被禁用。但是，如果您删除复选标记，文本输入仍然被禁用，而应该启用它。任何人都可以帮忙吗？我对此很陌生。好像没有考虑复选框的新值。

代码：

import React from 'react'

import {
  CButton,
  CCard,
  CCardBody,
  CCardFooter,
  CCardHeader,
  CCol,
  CForm,
  CFormGroup,
  CTextarea,
  CInput,
  CInputFile,
  CInputCheckbox,
  CLabel,
  CSelect,
  CRow,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'

import { DocsLink } from 'src/reusable'

const AddItem = () => {

  const [collapsed, setCollapsed] = React.useState(true)

  const [showElements, setShowElements] = React.useState(true)

const [name,setName] = React.useState("")

const [aaaa,setAaaa] = React.useState(false)

const [bbbb,setBbbb] = React.useState(false)


let disable2 = (e)=>{

setName(e.target.value);

if(e.target.value=== "true"){

    setAaaa(true)

    setBbbb(true)

}else{

  setAaaa(false)

  setBbbb(false)

}

}

  return (

    <>      
 
      <CRow>
        <CCol xs="12" md="6">
          <CCard>
            <CCardHeader>
              Add New Item {name}
            </CCardHeader>
            <CCardBody>
              <CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">

              <CFormGroup row>
                      <CCol md="3">
                        <CLabel htmlFor="disabled-input">Item Serial Number</CLabel>
                    </CCol>
                    <CCol xs="12" md="9">
                        <CInput id="disabled-input" name="disabled-input" disabled={aaaa}/>
                    </CCol>
                </CFormGroup>

                  <CFormGroup row>
                  <CCol md="3"><CLabel></CLabel></CCol>
                  <CCol md="9" style={{marginTop:"-20px"}}>
                    <CFormGroup variant="checkbox" className="checkbox">
                      <CInputCheckbox 
                        id="checkbox1" 
                        name="checkbox1" 
                        onChange={e => disable2(e)} 
                        value="true"
                      />
                      <CLabel variant="checkbox" className="form-check-label" htmlFor="checkbox1">Auto Assigned</CLabel>
                    </CFormGroup>
                   </CCol>
                   </CFormGroup>

【问题讨论】：

标签： reactjs

【解决方案1】：

请参考以下示例

import { useState } from "react";

export default function App() {
  const [checked, setChecked] = useState(false);
  const [text, setText] = useState("");
  return (
    <div className="App">
      <label>
        Checkbox:
        <input
          name="checkbox"
          type="checkbox"
          checked={checked}
          onChange={() => {
                if(checked){
                  setText('')
                }
            setChecked(!checked)
              }
           }
        />
      </label>
      <label>
      Input:
        <input
          name="input"
          type="text"
          disabled={!checked}
         value={text}
         onChange={e => setText(e.target.value)}
        />
      </label>
    </div>
  );
}

【讨论】：