Question

我尝试将Form组件放入。它在单独的文件中时不起作用，但是当我将Form组件放在同一个文件中时，它可以工作。

App组件位于

之下

import React, { Component } from 'react';
import Form from './Form';
import logo from './logo.svg';
import './App.css';
import './content.css';

class App extends Component {
  render() {
    return (
      <div className="App">
      <Form />
      </div>
    );
  }
}

export default App;

Form.js中的表单组件

import React, { Component } from 'react';
import './content.css';

class Form extends Component {
  constructor() {
     super();
     this.state = {
       count: 0,
     };
   }

  updateCount() {
   this.setState((prevState, props) => {
     return { count: prevState.count + 1 }
   });
 }

  render() {
    return (
      <div id="loginWrap">
      <form id="loginForm">
        <span class="logTitle">Username</span><br/>
          <input type="text" id="username" placeholder="" value={this.state.count} onclick="onFoc()"/><br/>
        <span class="logTitle">Password</span><br/>
          <input type="password" id="password" placeholder="" /><br/><br/>
        <button id="login"  onClick={() => this.updateCount()}>submit</button>
      </form>
    </div>
    );
  }

}

注意：我是ReactJS的新手（我的第一个JS框架......不包括JQuery）

Answer 1

您忘记了export您的表单组件：

变化：

class Form extends Component {...}

要：

export default class Form extends Component {...}

ReactJS为什么导入导出不适合我？

1 个答案: