单击按钮或单选按钮时如何显示组件

Question

 import React, { Component } from 'react'; class ImageStyle extends Component { constructor(props) { super(props); this.state = { title: '', url: '', summary: '' }; this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { this.setState({ [event.target.name]: event.target.value }); } render() { return ( <div> <div> <h1 className="row px-2">Image Style Notification</h1> <hr /> <div className="row px-1 py-2 animated fadeIn"> <div className="px-1" style={{ width:50 + '%' }}><br /> <div className="mb-1"> <input type="text" className="form-control" placeholder="Title" name="title" value={this.state.title} onChange={this.handleInputChange} /> </div> <div className="mb-1"> <textarea className="form-control" placeholder="Image URL" name="url" value={this.state.url} onChange={this.handleInputChange} /> </div> <div className="mb-1"> <textarea className="form-control" placeholder="Summary" name="summary" value={this.state.summary} onChange={this.handleInputChange} /> </div> <br /> <div className="row px-2" > <div> <button className="nav-link btn btn-block btn-info" onClick={this.handleClick} >Save</button> </div> <div className="px-1"> <button className="nav-link btn btn-block btn-danger"> Cancel</button> </div> </div><br /> </div> <div><br /> <div className="android"> <table className="table table-clear android-width"> <tbody> <tr> <td> <img src={this.state.url} alt="Notification Image" className="img-width-android"/> </td> <td className="img-text-css"> <h4><strong> {this.state.title} </strong></h4><br /><br /><br /><br /> {this.state.summary}<br /> </td> </tr> </tbody> </table> </div> <div className="mobile"> <table className="table table-clear img-css"> <tbody> <tr> <td> <img src={this.state.url} alt="Notification Image" className="img-width-css"/> </td> <td className="img-text-css"> <h4><strong> {this.state.title} </strong></h4><br /><br /><br /><br /> {this.state.summary}<br /> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> ) } } export default ImageStyle; 

i had made two components to show as android and IOS as per my css being added as android for android and mobile for IOS Now what i want is to add a button or Radio Button named IOS and Android and On Clicking the button relevant component is to be displayed only

Answer 1

You can create separate components for both the layouts and then create radio buttons, whole value you will keep in the state and depending on that conditionally you can render the correct component.

checkRadio =(e) =>{
  if(e.target.checked) {
    this.setState({layout: e.target.value});
  }
}

render() {

        return ( 
          <div>
            <div>
              <h1 className="row px-2">Image Style Notification</h1>
              <hr />
              <div className="row px-1 py-2 animated fadeIn">

                    <div className="px-1" style={{ width:50 + '%' }}><br />

                        <div className="mb-1">
                          <input type="text"
                           className="form-control" 
                           placeholder="Title"
                           name="title"
                           value={this.state.title}
                           onChange={this.handleInputChange}
                           />
                        </div>

                        <div className="mb-1">
                          <textarea 
                          className="form-control" 
                          placeholder="Image URL"
                          name="url"
                          value={this.state.url}
                           onChange={this.handleInputChange}
                          />
                        </div>

                        <div className="mb-1">
                          <textarea
                           className="form-control" 
                           placeholder="Summary"
                           name="summary"
                           value={this.state.summary}
                           onChange={this.handleInputChange}
                           />
                        </div>

                        <br />

                        <div className="row px-2" >
                          <div>
                            <button className="nav-link btn btn-block btn-info"  onClick={this.handleClick} >Save</button>
                          </div>
                          <div className="px-1">
                            <button className="nav-link btn btn-block btn-danger"> Cancel</button>
                          </div>
                        </div><br />

                    </div>
                    <div><br />
                      <input type="radio" name="layout" value="mobile" onChange={this.checkRadio}/>
                      <input type="radio" name="layout" value="android" onChange={this.checkRadio}/>
                      {(this.state.layout === "mobile")? <Android url={this.state.url} summary={this.props.summary} title={this.state.title}/>: <Mobile url={this.state.url} summary={this.props.summary} title={this.state.title}/>}





                    </div>
              </div>
        </div>
        </div>
        )

      }


    class Android extends React.Component {
       constructor(props) {
           super(props);
        }

        render() {
            return (
                 <div className="android">
                          <table className="table table-clear android-width">
                          <tbody>
                            <tr>
                              <td>
                                <img src={this.props.url} alt="Notification Image" className="img-width-android"/>
                              </td>
                              <td className="img-text-css">
                                <h4><strong>
                                  {this.props.title}
                                </strong></h4><br /><br /><br /><br />
                               {this.props.summary}<br /> 
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
            )
        }
    }


    class Mobile extends React.Component {
       constructor(props) {
           super(props);
        }

        render() {
            return (
                <div className="mobile">
                          <table className="table table-clear img-css">
                          <tbody>
                            <tr>
                              <td>
                              <img src={this.props.url} alt="Notification Image" className="img-width-css"/>
                                </td>
                              <td className="img-text-css">
                                <h4><strong>
                                  {this.props.title}
                                </strong></h4><br /><br /><br /><br />
                               {this.props.summary}<br /> 
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
            )
        }
    }