如何在提交时从React-Bootstrap表单中获取值？

Question

如何在提交时从React-Bootstrap表单中获取值？

12

我正在尝试使用React-Bootstrap获取表单输入的值。在React功能组件中从React Bootstrap表单获取表单值的标准流程是什么？

export default function SpouseForm() {
  const dispatch = useContext(DispatchContext);

  return (
    <Form>
      <Row>
        <Col xs={12} md={12} lg={{ span: 6, offset: 3 }}>
          <InputGroup className="mb-3">
            <InputGroup.Prepend>
              <InputGroup.Text>Age</InputGroup.Text>
            </InputGroup.Prepend>
            <FormControl /> <--------- I want to get this value on submit /////////////////
      </InputGroup>
        </Col>
      </Row>
      <Row>
        <Col xs={12} md={12} lg={{ span: 6, offset: 3 }}>
          <Button
            onClick={(e) => {
              e.preventDefault()
              dispatch({ type: "SPOUSE_AGE", spouseAge: e.target.value }); < ----- tried to get it here, not working
              router.push('/children')
            }}
            style={{ width: '100%' }}
            type="submit"
            variant="outline-primary"
            size="lg" >Next</Button>{' '}
        </Col>
      </Row>
    </Form>
  )
}

- IWI

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yevhen Horbunkov · Accepted Answer

如果您使用受控组件，则需要实时跟踪其值并将其存储在状态中：

const { useState } = React,
      { render } = ReactDOM,
      { Form , Button } = ReactBootstrap,
      rootNode = document.getElementById('root')

const App = () => {
  const [value, setValue] = useState(),
        onInput = ({target:{value}}) => setValue(value),
        onFormSubmit = e => {
          e.preventDefault()
          console.log(value)
          setValue()
        }
  
  return (
    <Form onSubmit={onFormSubmit}>
      <Form.Control 
        type="text" 
        onChange={onInput} 
        value={value}
      />
      <Button type="submit">
        Submit
      </Button>
    </Form>
  )
}

render (
  <App />,
  rootNode
)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script><div id="root"></div>

另一种方法是使用不受控制的输入框，并在提交时访问FormData：

const { useState } = React,
      { render } = ReactDOM,
      { Form , Button } = ReactBootstrap,
      rootNode = document.getElementById('root')

const App = () => {
  const onFormSubmit = e => {
          e.preventDefault()
          const formData = new FormData(e.target),
                formDataObj = Object.fromEntries(formData.entries())
          console.log(formDataObj)
        }
  
  return (
    <Form onSubmit={onFormSubmit}>
      <Form.Control type="text" name="myInput" />
      <Button type="submit">
        Submit
      </Button>
    </Form>
  )
}

render (
  <App />,
  rootNode
)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script><div id="root"></div>