如何在 react.js 中按钮的 onClick 事件的同一窗口中显示表单

IT技术 reactjs
2021-05-01 11:23:21

我是新手，对一些基础知识做出react和挣扎。我想在按钮的 onClick 事件上显示一个表单。不知何故，我无法实现，而且我在控制台中也没有发现任何错误。有人可以指导我通过。

下面是我的 App.js

import React, { Component } from 'react';
import EnvironmentList from './components/enviromentList';
import ManageApp from './components/manageApp'
import './App.css';

class App extends Component {
    state = {
        Apps : [
            { AppName : "a1" },
            { AppName : "a2" },
            { AppName : "a3" },
        ]
    }
    render(){
        return (
            <div className="App">
                <header className="App-header">

                    <h1>Welcome to environment Portal!</h1>
                </header>  
                <EnvironmentList Apps={this.state.Apps}/>
                <ManageApp />
            </div>
        );
    }
}

export default App;

下面是我的 manageApp.js

import React, { Component } from 'react';

class ManageApp extends Component{

    constructor(props){
        super(props);
        this.getForm = this.getForm.bind(this);
    }

    getForm = (e) => {
       return (
           <div> 
               <form id= "add-app">

                   <label>Application Name : </label>
                   <input type="text"> </input>

                   <label> id : </label>
                   <input type="text" ></input>

                   <label>Server details : </label>
                   <input ></input>

                   <button>Create</button>
              </form>
          </div>
       );
    }

    render(){
        return (
            <div className='manage-app'>
                <h1>Manage Application</h1>
                <button onClick={ this.getForm }>Add New Application</button>
                <button>Change Existing Application</button>
                <button>Remove Application</button>
            </div>
        );
    }
}

export default ManageApp;

如何通过单击“添加应用程序”按钮在浏览器中显示表单

2个回答

这是你可以做到的方法

import React, { Component } from 'react';

class ManageApp extends Component{
state= {showForm: false}

showForm = () => {
   return (
     <div> 
    <form id= "add-app">

         <label>Application Name : </label>
         <input type="text"> </input>

         <label> id : </label>
         <input type="text" ></input>

         <label>Server details : </label>
         <input ></input>

         <button>Create</button>
      </form>
      </div>
     );
 }

render(){
    return (
        <div className='manage-app'>
        <h1>Manage Application</h1>
        <button  onClick={() => this.setState({showForm: true}) }>Add New Application</button>
        <button>Change Existing Application</button>
        <button>Remove Application</button>
        {this.state.showForm ? this.showForm() : null}
        </div>
    );
}

}
export default ManageApp

您缺少的是您必须存储用户已单击该按钮。稍后您可以使用该信息（状态）来呈现不同的内容。

import React, { Component } from 'react';

class ManageApp extends Component{

    constructor(props){
        super(props);

        // Here we initialize our components state
        this.state = {
            showForm: false
        };

        this.onClick = this.onClick.bind(this);
    }

    onClick () {
        // On click we change our state – this will trigger our `render` method
        this.setState({ showForm: true });
    }

    renderForm () {
       return (
           <div> 
               <form id= "add-app">

                   <label>Application Name : </label>
                   <input type="text"> </input>

                   <label> id : </label>
                   <input type="text" ></input>

                   <label>Server details : </label>
                   <input ></input>

                   <button>Create</button>
              </form>
          </div>
       );
    }

    render() {
        // We get the state for showing the form from our components state
        const { showForm } = this.state;

        return (
            <div className='manage-app'>
                <h1>Manage Application</h1>
                <button onClick={ this.onClick }>Add New Application</button>
                <button>Change Existing Application</button>
                <button>Remove Application</button>

                {/* We want to show the form if the state is true */}
                {showForm && this.renderForm()}
            </div>
        );
    }
}

export default ManageApp;

它应该如何看起来/集成，你必须决定。但我认为这是一个很好的起点。

其它你可能感兴趣的问题
上一篇如何在 react-native 中渲染多个组件并设置单个状态？ 下一篇ElectronJS - 在 Windows 之间共享 redux 存储？