semantic-ui-react Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag

Question

我正在使用语义-ui-对 build 新用户的表单作出反应：

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;

当我 uild 我收到这个错误:

./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 中。我在我的应用程序的其他部分使用了 semantic-ui-react 组件，没有任何错误，我不知道为什么 build 挂断了这个。

我们将不胜感激任何帮助。谢谢。

Answer 1

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

应该是

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

semantic-ui-react Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag

semantic-ui-react Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag

javascript

reactjs

semantic-ui

react-redux

semantic-ui-react