如何在React或React-Redux中将数据从一个组件传递到另一个组件?
发布于 2021-01-31 22:56:58
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
被浏览
87
1 个回答
-
为了简化解决方案,您可以执行以下操作:
<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} ... />
推荐阅读
-
React.js-将状态值从一个组件传递到另一个
2021-01-31 关注 0 浏览158 1答案
-
React-如何将状态传递给另一个组件
2021-01-31 关注 0 浏览82 1答案
-
如何在另一个组件中获取Redux Form数据
2021-01-31 关注 0 浏览84 1答案
-
如何在React.js中获取另一个组件的元素?
2021-01-31 关注 0 浏览93 1答案
-
如何在JMeter中将变量从一个线程组传递到另一个线程组
2021-01-31 关注 0 浏览374 1答案
-
React.js:将一个组件包装到另一个组件中
2021-01-31 关注 0 浏览103 1答案
-
如何在MySQL中将数据从一个表复制到另一个新表?
2021-02-02 关注 0 浏览142 1答案
-
redux-form:如何在另一个组件上显示表单值
2021-01-31 关注 0 浏览106 1答案
-
如何在React Router中将DefaultRoute设置为另一个路由
2021-01-31 关注 0 浏览47 1答案
-
如何在react-redux中访问第二个组件中的存储
2021-01-31 关注 0 浏览77 1答案