React js:如何禁用基于复选框值的文本输入？

Question

我正在创建一个表单，用于添加一个新的“项目”到一个在线购物网站。在此表单上，有一个测试输入框，用户应在其中包含要添加的项目的序列号。在它的正下方有一个复选框，如果选中它，将自动分配一个序列号，以防用户不想使用自定义序列号。因此，如果复选框被单击或选中(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>

Answer 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>
  );
}