如何显示上点击按钮或单选按钮
问题描述:
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 和单击按钮相关组件将仅显示
答
您可以为两个布局创建单独的组件,然后创建单选按钮,整个值你将保持在状态和德在有条件的情况下,您可以渲染正确的组件。在此行
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>
)
}
}
语法错误,也有这 类没有单选按钮的Android扩展组件{ – Piyush
的Piyush,我给您解决问题的方法。这不是一个确切的解决方案。另外我认为语法错误是一些可以由你纠正的问题。由于我没有模拟代码这样的错误来 –
我删除了错误 它只显示ios部分根据您提供的片段 – Piyush