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

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 for android 和 mobile for 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>
            )
        }
    }