javascript - 将信息从表单传递到函数 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>

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

标签： javascriptreactjsreact-functional-component

Answer 1

表单的默认行为是在单击提交按钮时触发重新加载。您可以通过event.preventDefault()在 onSubmit 方法中使用来防止这种行为

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