如何显示上点击按钮或单选按钮

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;

我做了两个组成部分显示为Android和iOS组件按我的CSS被添加为安卓Android和移动的IOS 现在我想要的是添加一个按钮或单选按钮名为IOS和Android 和单击按钮相关组件将仅显示

Answer 1

您可以为两个布局创建单独的组件，然后创建单选按钮，整个值你将保持在状态和德在有条件的情况下，您可以渲染正确的组件。在此行

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