import React, { Component } from 'react';
class BigText extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
text: '',
summary: ''
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
render() {
return (
<div>
<div>
<div className="row animated fadeIn">
<div className="px-1" style={{ width:100 + '%' }}><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="Text"
name="text"
value={this.state.text}
onChange={this.handleInputChange}
/>
</div>
<div className="mb-1">
<textarea
className="form-control"
placeholder="Summary"
name="summary"
value={this.state.summary}
onChange={this.handleInputChange}
/>
</div>
</div>
<div>
</div>
</div>
</div>
</div>
)
}
}
export default BigText;
import React, { Component } from 'react';
import BigText from './bigText.js';
import InboxStyle from './inboxStyle.js';
import ImageStyle from './imageStyle.js';
import BigTextMobile from './bigText.mobile.js';
import InboxStyleMobile from './inboxStyle.mobile.js';
import ImageStyleMobile from './imageStyle.mobile.js';
class BasicNotification extends Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleClick = this.handleClick.bind(this);
}
static contextTypes = {
router: React.PropTypes.object
}
handleClick() {
this.context.router.push('/notifications');
}
handleChange(event) {
this.setState({value: event.target.value});
}
checkRadio =(e) =>{
if(e.target.checked) {
this.setState({layout: e.target.value});
}
}
render() {
return (
<div>
<div>
<h1 className="px-2">Create Notification</h1>
<hr />
<div className="row px-1 py-2 animated fadeIn">
<div className="px-1 mr-2" style={{ width:50 + '%' }}><br />
<div className="mb-1">
<input type="text"
className="form-control"
placeholder="Title"
name="title"
/>
</div>
<div className="mb-1">
<textarea
className="form-control"
placeholder="Text"
name="text"
/>
</div>
<div>
<select placeholder="Logo" className="form-control" onChange={this.handleChange}>
<option default>Select Logo</option>
<option>Default</option>
<option>Custom</option>
</select>
</div>
<div><br />
<div className="btn-group" data-toggle="buttons">
<label className="btn btn-css btn-outline-secondary">
<input type="radio" name="layout" value="image" onChange={this.checkRadio}/>ImageStyle
</label>
<label className="btn btn-css btn-outline-secondary">
<input type="radio" name="layout" value="big" onChange={this.checkRadio}/>BigText
</label>
<label className="btn btn-css btn-outline-secondary">
<input type="radio" name="layout" value="inbox" onChange={this.checkRadio}/>InboxStyle
</label>
</div>
{
(this.state.layout === "big")?
<BigText/>:
(this.state.layout === "image")?
<ImageStyle/>:
(this.state.layout === "inbox")?
<InboxStyle/>:
null
}
<br />
<div className="row px-1" >
<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>
</div><br />
</div>
<div>
{
(this.state.layout === "big")?
<BigTextMobile text={this.state.text} summary={this.state.summary} title={this.state.title}/>:
(this.state.layout === "image")?
<ImageStyleMobile/>:
(this.state.layout === "inbox")?
<InboxStyleMobile/>:
null
}
</div>
</div>
</div>
</div>
)
}
}
export default BasicNotification;
这是我制作的屏幕,我已经导入了三个文件,这些文件将在单击单选按钮上显示。 另外还有相关的移动屏幕 现在例如我导入,因为你可以看到BigText,它包含表单 现在我想在BigTextMobile组件中打印其输入值
答案 0 :(得分:2)
为简化解决方案,您可以执行以下操作:
<BigText onChange={data => {this.setState({ data })}} />
在 BigText 组件中,您可以通过此回调放置一些数据,如下所示:
handleInputChange(event) {
const data = {
[event.target.name]: event.target.value
};
this.setState(data );
this.props.onChange(data);
}
并将此数据从状态传输到 BigTextMobile 组件:
<BigTextMobile data={this.state.data} ... />