语义UI反应语法错误：相邻JSX元素必须包装在一个封闭标签中

Question

我正在使用语义UI反应来为新用户构建表单：

import React from 'react';
import { Form } from 'semantic-ui-react';
import {createUser} from '../../../actions/userAction';

class UserAddModalForm extends React.Component {
  constructor(props) {
    super(props);
  }

  handleSubmit(event, props) {
    event.preventDefault();
    let body = {
        lastname: event.target.lastName.value,
        firstname: event.target.firstName.value,
        username: event.target.userName.value,
        email: event.target.email.value,
    }
    props.dispatch(createUser(body));
    props.onCancel();
  }

  render() {
    return(
      <div>
        <Form onSubmit={ (event) => this.handleSubmit(event, this.props)>
          <Form.Field>
            <label>Last Name</label>
            <input name='lastName' />
          </Form.Field>
          <Form.Field>
            <label>First Name</label>
            <input name='firstName' />
          </Form.Field>
          <Form.Field>
            <label>Username</label>
            <input name='userName' />
          </Form.Field>
          <Form.Field>
            <label>Email Address</label>
            <input name='email' />
          </Form.Field>
          <Button type='submit'>Submit</Button>
          <Button onClick={ this.props.onCancel }>Cancel</Button>
        </Form>
      </div>
    )
  }
}

export default UserAddModalForm;

构建时收到此错误：

./src/components/ui/users/UserAddModalForm.js
Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag (30:10)

  28 |             <input name='lastName' />
  29 |           </Form.Field>
> 30 |           <Form.Field>
     |           ^
  31 |             <label>First Name</label>
  32 |             <input name='firstName' />
  33 |           </Form.Field>

我已经四处搜寻，据我所知，我将JSX元素包含在div中。 我在应用程序的其他部分中使用了语义UI反应组件，没有出现任何错误，我迷茫了为什么构建会挂在它上面。

任何和所有帮助将不胜感激。 谢谢。

Answer 1

<Form onSubmit={ (event) => this.handleSubmit(event, this.props)>

应该

<Form onSubmit={ (event) => this.handleSubmit(event, this.props)}>