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

Question

我在我的Addroom component 中创建了两个dropdowns selection、input 和一个button，我只想通过单击button 在我的主页中显示该组件 - 它看起来像一个一个按钮的页面。

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

在目前的情况下，一切都已经在主页上..

• Addroom component 带有用于填充的元素。
• Room Component 的标题填写了用户详细信息。

这就是我想要的样子：

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

我尝试了不同的methods 来分别显示组件，但是这些方法都不能正常工作，只是在代码中造成了很多我无法理解的混乱。 我尝试了boolean values 之类的方法，并尝试根据特定条件创建一个按钮，以及基于状态值的方法，将operators 与functions 联系以根据唯一标识符更新state values。

有没有一种简单的方法可以在不破坏有效算法的情况下做到这一点？ 我真的可以用手.. 谢谢！特别感谢您的耐心等待..

App.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>
    )
  }
}

Addroom.js

import React, { Component } from 'react'


export default class Addroom extends Component {

    constructor(props) {
        
        super(props)
        this.state = {
            backgroundColor:'white',
            room:'',
            roomNameInputColor:'white',
            roomTypes:["kitchen", "bathroom", "bedroom"],
            roomSelected: [''],
            roomSel:'',
            colorTypes:['red', 'green', 'blue', 'teal'],
            colorSelected:[''],
            colorSel:'',
    };   
        }

        addRoomName = (e) => {
            const room = e.target.value;
          
            let roomNameInputColor = 'white';
            if (e.target.value.length >= 5) {
              roomNameInputColor = 'green';
            } else {
              roomNameInputColor = 'red';
            }
          
            this.setState({ room, addRoomName: room, roomNameInputColor });
          }


    createRoom=()=> {
        this.props.add(this.state.room);
    }

    createRoomType=()=> {
        this.props.addRoomType(this.state.roomSelected);
    }

    createColorType=()=> {
        this.props.addColorType(this.state.colorSelected);
    }


    setCategory = (roomSel) => {
        this.setState({roomSelected : roomSel});
    };

    setColorCategory = (colorSel) => {
        this.setState({colorSelected : colorSel});
    };
    
    render() {
        return (
            <div>

            {/* //Select Room Type */}
            <select onChange={(e) => this.setCategory(e.target.value)}>{this.state.roomTypes.map((type) =>
            <option value={type}>{type}</option>
               )}</select><br/>

            {/* //Select Room Color */}
            <select onChange={(e) => this.setColorCategory(e.target.value)}>{this.state.colorTypes.map((type) =>
            <option value={type}>{type}</option>
               )}
      
            </select><br/>

            <input onChange={this.addRoomName} style={{backgroundColor:this.state.roomNameInputColor}} placeholder='Name Your Room'/><br/>
 
            <button onClick={() => {this.createRoom(); this.createRoomType(); this.createColorType();}}>Create</button>   
            </div>
        )
    }
}

Room.js

import React, { Component } from 'react'

export default class Room extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
        }
    }
    
    render() {
        return (
            <div>
                <h3>Room1: {this.props.r} </h3>
                <h3>Room Type1: {this.props.rt}</h3>
                <h3>Room Color1: {this.props.ct}</h3>
                
            </div>
        )
    }
}

Answer 1

如果我理解正确，您只想在用户单击“创建”按钮一次时显示“添加房间”下拉菜单和输入，之后他们可以添加房间。为此，您可以使用状态来切换要显示的内容。

我已经快速sandbox example，请看看是否有效。

注意：使用map()时不要忘记添加密钥，如下所示：

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

编辑：改进沙盒代码