Question

这是我的问题。我有一个下拉列表，其中包含选项列表。选择选项后，将打开一个新的选项卡，其中将包含该特定选项的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发送到服务器端的方法。你能帮我吗。

Answer 1

要解决此问题，您可以在通过window.open()打开新标签页/窗口时使用查询字符串。

因此，像这样更新handleSelection()方法将实现您所需要的：

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

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

然后，您只需要更新<Tableau />路径上显示的/client组件，以便读取并响应option_id变量中的值。查询字符串。

希望这会有所帮助！

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

1 个答案: