单击按钮即可显示不同的组件（反应组件类）

Question

我在dropdowns selection中创建了两个input，button和一个Addroom component，并且我只想单击{ {1}}-看起来像一个带有单个按钮的页面。

用户完成填写详细信息（在button并单击Addroom component后，我要显示Create button和用户填写的titles- values。

在当前情况下，所有内容都已经在主页上。

• Room component中包含要填写的元素。
• Addroom component，其标题充满了用户详细信息。

这就是我想要的样子：

我希望解释是可以理解的-这是两个按钮...

我尝试使用不同的Room Component来分别显示组件，但是没有一种方法可以正常工作，并且造成了很多代码无法理解的混乱。 我尝试了类似methods之类的事情，并尝试根据特定条件创建一个按钮，并且还尝试了基于状态值的方法，该状态值将boolean values与operators联系以更新{{1} }基于唯一标识符。

有没有一种简单的方法可以做到这一点而又不破坏可用的算法？ 我真的可以用一只手。 谢谢！特别感谢您的耐心等候。

App.js

functions

Addroom.js

state values

Room.js

import React, { Component } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import './App.css';
import Addroom from './components/Addroom.js'
import Room from './components/Room.js'

export default class App extends Component {

  state={
    
    roomsList:[{room:''}],
    roomTypeSelection:[{roomType:''}],
    colorTypeSelection:[{colorType:''}],
    isActive: false
}

handleShow = () => {
  this.setState({isActive: true});
};

handleHide = () => {
  this.setState({isActive: false});
};

create=(r)=> {
  this.setState({roomsList:[...this.state.roomsList,{room:r}]})
} 

getRoomTypeSelection=(rt)=> {
  this.setState({roomTypeSelection:[...this.state.roomTypeSelection,{roomType:rt}]})
} 

getColorTypeSelection=(ct)=> {
  this.setState({colorTypeSelection:[...this.state.colorTypeSelection,{colorType:ct}]})
} 

  render() {
    
    return (
      <div>
        
        <h1>My Smart House</h1>

{this.state.roomsList.map((element)=>{
         return <Room r={element.room} rt={element.roomType} ct={element.colorType}/>
       })}

      <Addroom add={this.create}  addRoomType={this.getRoomTypeSelection} addColorType={this.getColorTypeSelection}/>

      </div>
    )
  }
}

Answer 1

如果我理解正确，那么您只想显示Addroom下拉列表，并在用户单击一次Create按钮时输入内容，然后他们可以添加房间。为此，您可以使用状态来切换显示内容。

我快速做了sandbox example，请查看是否可行。

注意：使用map()时不要忘记添加密钥，就像这样：

<select>
    {items.map((value, key) => (
       <option key={key} value={value}>{value}</div>
    ))}
</select>

编辑：改进了沙箱代码