将信息从表单传递到函数 React js

Question

我是 React 和 js 的新手，我想创建一个包含一些可修改信息的编辑表单，稍后可以使用 Axios 将其发布到 API。问题是，当我点击提交按钮时我没有进入我的功能，我不知道我的表单信息是否正确传递到我的编辑功能。

function EditJob (jobid, event) {
  console.log('editjob fired 1')
  console.log(jobid)

  const updateJob = {
    title: event.target.jobtitle.value,
    company_name: event.target.companyname.value,
    internal_code: event.target.internalcode.value,
    department: event.target.department.value,
    location: event.target.jlocation.value,
    tags: event.target.tags.value,
    benefits: event.target.benefits.value,
    description: event.target.description.value,
    requirements: event.target.requirements.value
  }
  return axios({
    method: 'put',
    url: '/api/jobs/update-job/' + jobid,
    headers: headers,
    data: updateJob
  })
}

export default function Jobs () {
  const classes = useStyles()
  const [jobs, locations, departments, tags, deleteJob, editJob] = useJobs()
  const [show, setShow] = React.useState(false)

  const handleClose = () => setShow(false)
  const handleShow = () => setShow(true)

  return (
    <>
   {jobs.map(job => (
          <>
            <Modal show={show} onHide={handleClose}>
              <Modal.Header closeButton>
                <Modal.Title>Edit Job Position</Modal.Title>
              </Modal.Header>
              <Modal.Body>

                <div className='container'>

                <Form onSubmit = {async () => { await EditJob(job.id); editJob() }}>

                <Row>
                  <Col lg={6}>
                    <Form.Group controlId='jobtitle'>
                      <Form.Label style={{ color: 'green' }}>Job Title :</Form.Label>
                      <Form.Control type='textbox' defaultValue={job.title} name='jobtitle' required placeholder='Enter Job Title' />
                    </Form.Group>

                    <Form.Group controlId='internalCode'>
                      <Form.Label style={{ color: 'green' }}>Internal Code :</Form.Label>
                      <Form.Control type='textbox' defaultValue={job.internal_code} name='internalcode' required placeholder='Enter Internal Code' />
                    </Form.Group>

                    <Form.Group controlId='department'>
                    <Form.Label style={{ color: 'green' }}>Department :</Form.Label>
                    <Form.Control type='textbox' defaultValue={job.department} name='department' disabled required placeholder='Enter Department' />
                  </Form.Group>

                  </Col>
                <Col lg={6}>

                  <Form.Group controlId='jlocation'>
                    <Form.Label style={{ color: 'green' }}>Location :</Form.Label>
                    <Form.Control type='textbox' defaultValue={job.location} name='jlocation' disabled required placeholder='Enter Location' />
                  </Form.Group>

                </Col>
              <Col lg={12}>
              <Form.Group>
                <Button style={{ position: 'relative', left: '295px' }} variant='success' type='submit'>Edit Job Position</Button>
              </Form.Group>
              </Col>
            </Row>
              </Form>
                </div>
              </Modal.Body>
        </Modal>

updateJob const 应该保存使用 event.target 从表单发送的信息，但我认为我做错了什么，因为我什至没有输入函数，我的页面只是当我点击提交按钮时刷新。执行此操作的正确解决方案是什么？

Answer 1

表单的默认行为是在单击提交按钮时触发重新加载。您可以通过在 onSubmit 方法

中使用 event.preventDefault() 来防止这种行为

<Form onSubmit = {async (event) => {
       event.preventDefault(); 
       await EditJob(job.id); 
       editJob() 
}}>

将信息从表单传递到函数 React js

Passing info from a Form into a function React js

javascript

reactjs

react-functional-component