如何使用 React js 在 onchange 中将数据从一个组件传递到另一个组件 [英] How to pass data from one component to another component in onchange using React js
问题描述
我有两个组件 1. Filter 和 2.Data
我已经在 main.js 文件中注入了两个组件
1.Main.js
render() {返回 (<div className={classes.Main}><过滤器/><数据组件/>);}
2.过滤组件
在过滤器中，组件有两个下拉菜单 1.Color 和 2.class基于下拉选择需要将数据从过滤器组件传递到数据组件
从'react'导入React；const 过滤器 = (道具) =>{返回 (<div><ul><li className={classes.displayInline} ><select name='color' onChange={this.handleChange} ><option value='0'>选择</option><option value='1'>red</option><option value='2'>blue</option></选择><li className={classes.displayInline} ><select name='class' ><option value='0'>选择类</option><option value='1'>first</option><option value='2'>Second</option><option value='3'>第三个</option><option value='4'>第四个</option></选择>);}导出默认过滤器；
3.数据组件
import React, { Component } from 'react';类数据组件扩展组件{构造函数(道具){超级(道具)；this.state = {项目: []，内容: []，}}componentDidMount() {获取(网址").then(res => res.json()).然后((结果) =>{this.setState({isLoaded: 真,项目:结果});},(错误) =>{this.setState({isLoaded: 真,错误});})}使成为() {/**** 从 api 获取的数据被推送到内容 ****/content.push(items);});返回 (/**** 渲染部分 ***/)}}导出默认数据组件；需要从过滤器组件获取下拉值到数据组件.
我对 reactjs 框架有了新的认识.
在过滤器组件中
handleChange = (event) =>{if(typeof this.props.selectedValueHandler !=='未定义'){this.props.selectedValueHandler(event.target.value);}}<块引用>
在主要组件中
在你的主文件中，你需要传递一个函数 selectedValueHandler 作为过滤器组件的道具，将用作回调过滤器组件从选择时的 Filter 组件内部.
然后可以将选定的值传递给Data Componennt
constructor() {this.state = {选择值:空}}selectedValueHandler = (selectedValue) =>{this.setState({选定值})}使成为() {const { selectedValue } = this.state;返回 (<div className={classes.Main}><Filter selectedValueHandler={this.selectedValueHandler}/><DataComponent selectedValue={selectedValue}/>);}
<块引用>
在您的数据组件中
您可以使用
直接访问数据组件中的选定值class DataComponent extends Component {使成为() {const { selectedValue } = this.props;...}}或者如果您想让它成为数据组件状态的一部分.
class DataComponent extends Component {构造函数(道具){超级(道具)；this.state = {项目: []，内容: []，selectedValue: this.props.selectedValue}}组件将接收道具(nextProps){if(this.state.selectedValue !== nextProps.selectedValue) {this.setState({selectedValue:nextProps.selectedValue})}}使成为() {const { selectedValue } = this.state;...}}取决于您的用例.
I have two component 1. Filter and 2.Data
I have injected both components in main.js file
1.Main.js
render() {
return (
<div className={classes.Main}>
<Filter />
<DataComponent />
</div>
);
}
2.Filter Component
In the filter, the component has two dropdowns 1. Color and 2.class based on the dropdown selection need to pass the data from filter component to data component
import React from 'react';
const Filter = (props) => {
return (
<div>
<ul>
<li className={classes.displayInline} >
<select name='color' onChange={this.handleChange} >
<option value='0'>Select</option>
<option value='1'>red</option>
<option value='2'>blue</option>
</select>
</li>
<li className={classes.displayInline} >
<select name='class' >
<option value='0'>Select Class</option>
<option value='1'>first</option>
<option value='2'>Second</option>
<option value='3'>Third</option>
<option value='4'>Fourth</option>
</select>
</li>
</ul>
</div>
);
}
export default Filter;
3.Data Component
import React, { Component } from 'react';
class DataComponent extends Component {
constructor(props) {
super(props);
this.state = {
items: [],
content: [],
}
}
componentDidMount() {
fetch("url")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
/**** data getting from api is pushed to content ****/
content.push(items);
});
return (
/**** render part ***/
)
}
}
export default DataComponent;
Need to get the dropdown values from the filter component to data component.
I have new to reactjs framework.
In Filter Component
handleChange = (event) => {
if(typeof this.props.selectedValueHandler !== 'undefined'){
this.props.selectedValueHandler(event.target.value);
}
}
In Main Component
In you main file you need to pass a function selectedValueHandler as
a prop to the filtercomponent, which will be used as a callback filtercomponent
from inside the Filter component on selection.
The selected value then can be passed to Data Componennt
constructor() {
this.state = {
selectedValue: null
}
}
selectedValueHandler = (selectedValue) => {
this.setState({
selectedValue
})
}
render() {
const { selectedValue } = this.state;
return (
<div className={classes.Main}>
<Filter selectedValueHandler={this.selectedValueHandler}/>
<DataComponent selectedValue={selectedValue} />
</div>
);
}
In your Data Component
You can directly access the selected value in Data Component using
class DataComponent extends Component {
render() {
const { selectedValue } = this.props;
...
}
}
or if you want to make it part of Data Component State.
class DataComponent extends Component {
constructor(props) {
super(props);
this.state = {
items: [],
content: [],
selectedValue: this.props.selectedValue
}
}
componentwillreceiveprops(nextProps) {
if(this.state.selectedValue !== nextProps.selectedValue) {
this.setState({
selectedValue: nextProps.selectedValue
})
}
}
render() {
const { selectedValue } = this.state;
...
}
}
Depends on your use case.
这篇关于如何使用 React js 在 onchange 中将数据从一个组件传递到另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
