问如何将输入值从搜索栏传递给另一个组件？

EN

    class SearchBar extends Component{
    
        constructor(props){
            super(props);
        
            this.state = {
              inputTicker:''
            }
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
    
        }
    
        handleSubmit (event) {
            event.preventDefault();
            // this.props.handleData(this.state)
            
            // const data = this.props.handelData(this.state);
            // console.log("Current value?", data);
            console.log("Current value?", this.state.inputTicker);
        }
    
        handleChange(event) {
            // event.preventDefault();
            console.log("Taking in value:",event.target.value);
            this.setState({
                inputTicker: event.target.value
            });
            this.props.handleSubmit(this.state);
        }

    render() {
        return(
            <>
            <form onSubmit={this.handleSubmit} >
            {/* <form handleSubmit={this.handleFormSubmit.bind(this)} > */}
                <div className="search-container">
                    <span className="search-icon-btn" >
                        <button className="search-icon-btn" 
                                value="Submit" 
                                type="submit" 
                        >
                            <i className="fa fa-search" ></i>
                        </button>
                    </span>
                    <div className="search-input">
                        <input 
                            type="search" 
                            className="search-bar" 
                            placeholder="Search ticker symbol..."
                            value={this.state.inputValue}
                            onChange= {this.handleChange}
                        />

                    </div>
                </div>
            </form>
            </>

        )
    }
}

export default SearchBar;

import React, { Component} from 'react';
import StockData from './stockData'
import './PriceModel.css';
import SearchBar from '../navigation-Bar/searchBar';
    
class PriceModel extends Component{
    
    constructor(props){
        super(props);
        
        this.state = {
          ticker:{}
        }
    }

    componentDidMount() {
        
        // console.log("passed the value:",this.props.inputTicker);
        // console.log("passed the value-1:",this.state.ticker);

    }
  
    render(){
        return(
            
            <div className="PriceModel" >
            
             
                    <table className="table mt-5">
                        <thead>
                            <tr>
                                <th>Ticker</th>
                                <th>Company</th>
                                <th>Price</th>
                                <th>PE Ratio</th>
                    
                            </tr>
                        </thead>

                        <tbody>
                           {/* <SearchBar handleSubmit={this.props.handleSubmit}/> */}
                            <StockData ticker = {this.props.inputTicker}/>

                        </tbody>
                    </table>
            </div>

         );
    }
}

export default PriceModel;