今IOS のためにアンドロイドとモバイルのためのアンドロイドとして追加されている私のCSSごとにAndroidとiOSのように表示するには、ボタンまたは私は2つの部品を作っていた

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;

ラジオボタンをクリックの上にコンポーネントを表示する方法私が望むのは、IOSとAndroidというボタンまたはラジオボタンを追加することです とオンボタン関連のコンポーネントをクリックするだけで表示されます

Answer 1

両方のレイアウトに別々のコンポーネントを作成して、州とdeに保持されます条件付きで保留にすると、正しいコンポーネントをレンダリングできます。この行の

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