React coreUI提交值没有被捕获

Question

提交表单时，我无法获取输入元素的值，我是否遗漏了什么，请帮忙

预期输出

每个输入元素的名称及其对应的值

实际输出

没有可用值的大事件对象

这是我的代码

不要阅读

只是添加一些字符，因为 stackoverflow 不会让我在这里发布这么多没有文本的代码

import React from 'react'

import {
    CButton,
    CCard,
    CCardBody,
    CCardFooter,
    CCardHeader,
    CCol,
    CCollapse,
    CDropdownItem,
    CDropdownMenu,
    CDropdownToggle,
    CFade,
    CForm,
    CFormGroup,
    CFormText,
    CValidFeedback,
    CInvalidFeedback,
    CTextarea,
    CInput,
    CInputFile,
    CInputCheckbox,
    CInputRadio,
    CInputGroup,
    CInputGroupAppend,
    CInputGroupPrepend,
    CDropdown,
    CInputGroupText,
    CLabel,
    CSelect,
    CRow,
    CSwitch
  } from '@coreui/react'
  import CIcon from '@coreui/icons-react'

const AddEmployee = () => {

  const submitHandler = (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
    console.log("data",data)
    console.log(e.target,"hi")
    
  }

    return (
        <>     
          <CRow>
            <CCol xs="12" md="12">
              <CCard>
                <CCardHeader>
                  Add New Employee
                </CCardHeader>
                <CCardBody>
                  <CForm onSubmit={submitHandler} method="post" encType="multipart/form-data" className="form-horizontal">
                    <CFormGroup row>
                      <CCol md="3">
                        <CLabel htmlFor="text-input">Name:</CLabel>
                      </CCol>
                      <CCol xs="12" md="9">
                        <CInput id="text-input" name="text-input" placeholder="Name"/>
                        <CFormText>Enter the employee name</CFormText>
                      </CCol>
                    </CFormGroup>
                    <CFormGroup row>
                      <CCol md="3">
                        <CLabel htmlFor="text-input">Mobile Number:</CLabel>
                      </CCol>
                      <CCol xs="12" md="9">
                        <CInput id="text-input" name="text-input" placeholder="Mobile Number" />
                        <CFormText>Enter employee's mobile number</CFormText>
                      </CCol>
                    </CFormGroup>
                    <CFormGroup row>
                      <CCol md="3">
                        <CLabel htmlFor="email-input">Email:</CLabel>
                      </CCol>
                      <CCol xs="12" md="9">
                        <CInput type="email" id="email-input" name="email-input" placeholder="Enter Email" autoComplete="email"/>
                        <CFormText className="help-block">Enter employee's email address</CFormText>
                      </CCol>
                    </CFormGroup>
                    <CFormGroup row>
                      <CCol md="3">
                        <CLabel htmlFor="password-input">Password</CLabel>
                      </CCol>
                      <CCol xs="12" md="9">
                        <CInput type="password" id="password-input" name="password-input" placeholder="Enter Password" autoComplete="password"/>
                        <CFormText className="help-block">Enter password</CFormText>
                      </CCol>
                    </CFormGroup>
                    <CFormGroup row>
                      <CCol md="3">
                        <CLabel htmlFor="confirm-password">Confirm Password</CLabel>
                      </CCol>
                      <CCol xs="12" md="9">
                        <CInput type="password" id="confirm-password" name="confirm-password" placeholder="Confirm Password" autoComplete="password"/>
                        <CFormText className="help-block">Confirm password</CFormText>
                      </CCol>
                    </CFormGroup>
                 
                <CCardFooter>
                  <CButton type="submit" size="sm" color="primary" className="mr-2"><CIcon name="cil-scrubber" /> Submit</CButton>
                  <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
                </CCardFooter>
                </CForm>
                </CCardBody>
              </CCard>
            </CCol>
          </CRow>
        </>
      )
}

export default AddEmployee

Answer 1

你需要为每个字段定义一个对应的状态：

  const [name, setName] = useState("default");

然后像这样在输入中设置它们：

                    <CInput
                      id="text-input"
                      name="text-input"
                      placeholder="Name"
                      value={name}
                      onChange={(e) => {
                        setName(e.target.value);
                      }}
                    />

在 onSubmit 回调中，您从这些状态中获取值。 示例：https://codesandbox.io/s/withered-meadow-kzzcu?file=/src/App.js