Question

我刚刚开始学习React，我想创建一个带有表单的简单页面。表单应包含输入city和date，选择列表<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Application</title> </head> <body> <div id="root"> <div class="form-container"></div> </div> </body> </html>并提交buttom。

我项目的结构

的index.html

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './bootstrap.min.css';
import './SearchForm.js';

index.js

const formContainer = document.querySelector('.form-container')

class SeacrhForm extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
       keywords: '',
       city: '',
       date: ''     
      }

      this.handleChange = this.handleChange.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this)
     }

    render() {
        return ( 
            <form className='search-form' onSubmit={this.handleSubmit}>
                <h1>Say Hi!</h1>
            </form>
        )
    }
}

ReactDOM.render(<SeacrhForm />, formContainer)

SearchForm.js

performSegue(withIdentifier: "ViewController", sender: self);

我的浏览器页面出错了

我做错了什么？

Answer 1

好的你需要将以下导入添加到searchform.js文件

import React from 'react';

import ReactDOM from 'react-dom';

并删除此行：

const formContainer = document.querySelector('.form-container')

并且永远不要更改index.html文件，而是创建一个新组件，就像你创建了searchform.js并在app.js中渲染它然后做出反应将自动渲染该组件

<div id=root></div>

您可能不需要手动执行此操作。查看以下链接，它可以帮助您更好地理解reactJs。

https://reactjs.org/docs/hello-world.html

Answer 2

添加

import React from 'react'
import ReactDOM from 'react-dom'

到SearchForm.js

Modern JS适用于ES模块，这意味着您需要将依赖项导入到每个文件（模块）中，否则这些库将无法使用。

React创建简单的表单

2 个答案: