如何使用 React js 在 onchange 中将数据从一个组件传递到另一个组件

Question

我有两个组件 1. Filter 和 2.Data

我已经在main.js文件中注入了两个组件

1.Main.js

render() {
        return (
            <div className={classes.Main}> 
                <Filter />
                <DataComponent />
            </div>
        );
    }

2.过滤组件

在过滤器中，组件有两个下拉列表 1.color 和 2.class 基于下拉选择需要将数据从过滤器组件传递到数据组件

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.数据组件

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;

需要从过滤器组件到数据组件获取下拉值。

我对 reactjs 框架有新的认识。

Answer 1

在过滤器组件中

handleChange = (event) => {
    if(typeof this.props.selectedValueHandler !== 'undefined'){
        this.props.selectedValueHandler(event.target.value);
    }
}

在主要组件中

在您的主文件中，您需要将一个函数selectedValueHandler作为道具传递给过滤器组件，它将在选择时用作Filter组件内部的回调过滤器组件。

然后可以将选定的值传递给 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>
        );
    }

在您的数据组件中

您可以使用以下命令直接访问数据组件中的选定值

class DataComponent extends Component {
    render() {
        const { selectedValue } = this.props;
        ...
    }
}

或者如果您想让它成为数据组件状态的一部分。

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;
        ...
    }
}

取决于您的用例。