我是新来的反应者，并在一些基础知识上苦苦挣扎。我想在按钮的onClick事件上显示一个Form。我以某种方式无法实现，也没有在控制台中找到任何错误。有人可以引导我通过。
以下是我的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;
单击“添加应用程序”按钮后如何在浏览器中显示表单
这是你怎么做
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
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句