在 semantic-ui-react 中获取表单值

Question

这是我的表格：

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 - 保持沉默。

Answer 1

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

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

将为您提供一个由表单数据制成的对象。（注意 Object.fromEntries is a somewhat newer API. There's a lodash method: 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"/>

Answer 2

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

语义UI反应示例

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

以及该部分正上方的提示：

Our <Form /> handles data just like a vanilla React . See React's controlled components docs for more.

在 semantic-ui-react 中获取表单值

Get form values in semantic-ui-react

reactjs

redux

semantic-ui-react

语义UI反应示例