Reactjs 如何在react.js中按钮的onClick事件上在同一窗口中显示窗体
我是一个新的反应和挣扎的一些基本知识。 我想在按钮的onClick事件上显示一个表单。 不知何故，我无法实现，而且在控制台中也没有发现任何错误。 有人能带我过去吗 下面是我的App.jsReactjs 如何在react.js中按钮的onClick事件上在同一窗口中显示窗体,reactjs,Reactjs,我是一个新的反应和挣扎的一些基本知识。 我想在按钮的onClick事件上显示一个表单。 不知何故，我无法实现，而且在控制台中也没有发现任何错误。 有人能带我过去吗 下面是我的App.js import React, { Component } from 'react'; import EnvironmentList from './components/enviromentList'; import ManageApp from './components/manageApp' import '
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;
import React，{Component}来自'React'；
从“/components/EnvironmentList”导入环境列表；
从“./components/ManageApp”导入ManageApp
导入“/App.css”；
类应用程序扩展组件{
状态={
应用程序：[
{AppName:“a1”}，
{AppName:“a2”}，
{AppName:“a3”}，
]
}
render（）{
返回(
欢迎来到环境门户！
);
}
}
导出默认应用程序；
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}来自'React'；
类ManageApp扩展组件{
建造师（道具）{
超级（道具）；
this.getForm=this.getForm.bind（this）；
}
getForm=（e）=>{
返回(
应用程序名称：
身份证件：
服务器详细信息：
创造
);
}
render（）{
返回(
管理应用程序
添加新应用程序
更改现有应用程序
删除应用程序
);
}
}
导出默认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
import React，{Component}来自'React'；
类ManageApp扩展组件{
状态={showForm:false}
showForm=（）=>{
返回(
应用程序名称：
身份证件：
服务器详细信息：
创造
);
}
render（）{
返回(
管理应用程序
this.setState（{showForm:true}}>添加新应用程序
更改现有应用程序
删除应用程序
{this.state.showForm？this.showForm（）：null}
);
}
}
导出默认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
import React，{Component}来自'React'；
类ManageApp扩展组件{
状态={showForm:false}
showForm=（）=>{
返回(
应用程序名称：
身份证件：
服务器详细信息：
创造
);
}
render（）{
返回(
管理应用程序
this.setState（{showForm:true}}>添加新应用程序
更改现有应用程序
删除应用程序
{this.state.showForm？this.showForm（）：null}
);
}
}
导出默认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;
import React，{Component}来自'React'；
类ManageApp扩展组件{
建造师（道具）{
超级（道具）；
//这里我们初始化我们的组件状态
此.state={
展示形式：假
};
this.onClick=this.onClick.bind（this）；
}
onClick（）{
//单击可更改状态–这将触发“render”方法
this.setState（{showForm:true}）；
}
渲染格式（）{
返回(
应用程序名称：
身份证件：
服务器详细信息：
创造
);
}
render（）{
//我们从组件状态获取显示表单的状态
const{showForm}=this.state；
返回(
管理应用程序
添加新应用程序
更改现有应用程序
删除应用程序
{/*如果状态为true，我们希望显示表单*/}
{showForm&&this.renderForm（）}
);
}
}
导出默认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;
import React，{Component}来自'React'；
类ManageApp扩展组件{
建造师（道具）{
超级（道具）；
//这里我们初始化我们的组件状态
此.state={
展示形式：假
};
this.onClick=this.onClick.bind（this）；
}
onClick（）{
//单击可更改状态–这将触发“render”方法
this.setState（{showForm:true}）；
}
渲染格式（）{
返回(
应用程序名称：
身份证件：
服务器详细信息：
创造
);
}
render（）{
//我们从组件状态获取显示表单的状态
const{showForm}=this.state；
返回(
管理应用程序
添加新应用程序
更改现有应用程序
删除应用程序
{/*如果状态为true，我们希望显示表单*/}
{showForm&&this.renderForm（）}
);
}
}
导出默认ManageApp；