Wie Komponenten auf einem Klick auf die Schaltfläche oder Radiobutton

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 gemacht hatte zwei Komponenten zeigen, wie Android und IOS zu zeigen, wie pro meine CSS als android Jetzt für Android und Handy für IOS hinzugefügt werden Was ich will, ist eine Schaltfläche oder Radio Button mit dem Namen IOS und Android und beim Klicken auf die Schaltfläche relevante Komponente nur angezeigt werden

Answer 1

Sie können separate Komponenten für beide Layouts erstellen und dann Radio-Schaltflächen, ganze Wert Sie erstellen wird in dem Zustand bleiben und de Aus diesem Grund können Sie die korrekte Komponente rendern.

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