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

Question

我正在尝试使用 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>
  )
}

Answer 1

要么您拥有受控输入并实时跟踪其状态中存储的值：

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>

Answer 2

您的问题之一是 FormData 只会为同时具有以下各项的输入字段创建条目：1. 名称和 2. 值。

从您的代码看来您缺少名称。您还应该像 Yevhen 所示那样捕获事件：onSubmit

做这两件事解决了我的问题。

    <Form onSubmit={onFormSubmit}>
              <Form.Group className="mb-3" controlId="test1" >
                  <Form.Label>Some TextX</Form.Label>
                  <Form.Control type="text" placeholder="type something" name={"value1"} />
              </Form.Group>
             
              <Button variant="primary" type="submit">
                  Submit
              </Button>
</Form>

const onFormSubmit = (e:any) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        formData.append('title','John');
        let i=0;
        // @ts-ignore
        for (let [key, value] of formData.entries()) {
            console.log(i++,key, value);
        }
    };