我如何调用另一个组件中的方法并传递查询参数

IT技术 reactjs
2021-05-15 03:18:20

这是我的问题。我有一个下拉列表,其中包含选项列表。选择一个选项后,将打开一个新选项卡,其中包含该特定选项的 Tableau 仪表板。我如何解决查询参数问题,因为我需要发送后端查询字符串(Option_ID)。

这是我的下拉组件:

import React,{Component} from 'react';
import './Dropdown.css';

class DisplayContainer extends Component {
    constructor(props){
      super(props);
      this.handleSelection = this.handleSelection.bind(this);
      this.state = {
        displayValue: 'Select a Client'
      }
    }

    handleSelection(item){
      this.setState({
        displayValue: item.client
      });

        window.open('/client');
    }
    render(){
    const listItems = this.props.options;
      return (
        <div className='dropdown-width'>
          <DropDown options={listItems} value={this.state.displayValue} onClick={this.handleSelection} />
        </div>
      );
    }
  }
  export default DisplayContainer;

现在我可以通过简单(虚拟)路由打开一个新选项卡。我需要一种将 ID 发送到服务器端的方法。你能帮我解决这个问题吗?

1个回答

要解决此问题,您可以在使用window.open().

因此,handleSelection()像这样更新您的方法将实现您的需求:

handleSelection(item){
  this.setState({
    displayValue: item.client
  });

  window.open('/client?option_id=' + item.id);
}

然后,您只需要更新<Tableau />显示在/client路由上组件,以便读取option_id查询字符串中变量的值并做出react

希望这可以帮助!