从另一个类在 App.js 中反应渲染表单

debugcn 发表于 Dev

海德尔

我为表单创建了简单的测试类 SearchForm.js

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

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)

这是我的 App.js

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

class App extends React.Component {
  render() {
    return (
      <div className="form-container">Test     
      </div>

    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

但我不明白如何呈现我的表单App.js？

舒巴姆·哈特里

在 App.js 中渲染 SearchForm 并像这样导入它 import { SearchForm } from './SearchForm.js';

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

class App extends React.Component {
  render() {
    return (
      <div className="form-container">Test  
        <SearchForm />   
      </div>

    );
  }
}

export default App;

并在更正错字后从 SeachForm 文件中导出它，

class SearchForm 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>
        )
    }
}

export { SearchForm}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。