在语义-ui-react 中获取表单值答案

【问题标题】：Get form values in semantic-ui-react在语义-ui-react 中获取表单值
【发布时间】：2021-04-28 02:10:37
【问题描述】：

这是我的表格：

import React from 'react'
import { Form, Button } from 'semantic-ui-react'

const CreatePostForm = ({ onSubmit }) =>
  <Form onSubmit={onSubmit}>
    <Form.Input name='user' label='user' placeholder='Enter user name' />
    <Form.Input name='title' label='title' placeholder='Enter post title' />
    <Form.Input name='text' label='text' placeholder='Enter post text' />
    <Form.Input name='category' label='category' placeholder='Enter post category' />
    <Button type='submit'>Submit</Button>
  </Form>

export default CreatePostForm

然后连接：

import { connect } from 'react-redux'
import CreatePostForm from '../components/CreatePostForm.jsx'

const mapDispatchToProps = (dispatch, props) => {
  return {
    onSubmit: (e, data) => {
      console.log(e)
      console.log(data)
    },  
  }
} 

const ConnectedCreatePostForm = connect(null, mapDispatchToProps)(CreatePostForm)
export default ConnectedCreatePostForm

在onSubmit 中，我希望传递一些数据，使我能够通过name 检索每个输入表单字段值，但我无法以某种方式访问它：有event 和data（我会希望）这只是表单本身而不是真正的data。如何在提交时访问值？我不想处理状态并希望我的组件 - CreatePostForm - 保持沉默。

【问题讨论】：

标签： reactjs redux semantic-ui-react

【解决方案1】：

您可以使用FormData 直接从表单的输入中获取数据：

Object.fromEntries(new FormData(event.target))

会给你一个由表单数据组成的对象。（注意Object.fromEntries 是一个较新的 API。有一个 lodash 方法：fromPairs，如果需要，它在功能上是相同的）

编辑：如果您需要使用 lodash 的 fromPairs：您需要执行以下操作，因为 lodash 的 fromPairs 不会作为迭代器自动遍历 FormData：

fromPairs(Array.from(new FormData(target)))

您也可以通过输入名称直接从表单元素中获取值：

console.log(event.target.user.value);

这将使您能够使用表单而无需将其设置为受控组件。

示例如下。我没有在示例中包含语义，因为这是普通 JS。

const CreatePostForm = () =>{
  const onSubmit = (event)=>{
    event.preventDefault();
    const {target} = event;
    console.log('FormData', Object.fromEntries(new FormData(target)));
    console.log('target.user.value', target.user.value);
  }
  return <form onSubmit={onSubmit}>
    <input name='user' label='user' placeholder='Enter user name' />
    <input name='title' label='title' placeholder='Enter post title' />
    <input name='text' label='text' placeholder='Enter post text' />
    <input name='category' label='category' placeholder='Enter post category' />
    <button type='submit'>Submit</button>
  </form>
}

ReactDOM.render(<CreatePostForm />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

【讨论】：

是的，您可以查看sandbox
对我来说 target.user.value 有效，但 new FormData(target) 产生一个空对象，不知道为什么..
我认为那是因为我们需要遍历获得的FormData 和Object.fromEntries 作品，但lodash fromPairs 没有。
@NikitaVlasenko，我更新了一些关于如何让 fromPairs 工作的说明。本质上，您只需要将 FormData 转换为数组。 Array.from 非常适合。

【解决方案2】：

如果你想按设计使用 Semantic UI React，看来你必须使用受控组件，所以你不使用状态的希望似乎不可行。

语义 UI 反应示例

https://react.semantic-ui.com/collections/form/#usage-capture-values

以及该部分上方的提示：

我们的 <Form /> 处理数据就像一个普通的 React 。有关更多信息，请参阅 React 的 controlled components 文档。

【讨论】：