gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 00:25:34 24 4
gpt4 key购买 nike

我正在尝试使用 React-Bootstrap 获取表单输入的值。从 react 中的功能组件上的 react 引导表单获取表单值的标准程序是什么?

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>
)
}

最佳答案

要么你有controlled input并跟踪其实时存储在您的状态中的值:

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>

另一种方法是拥有 uncontrolled inputs并访问 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>

关于javascript - 如何在提交时从 React-Bootstrap 表单中获取值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63182107/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com