时间戳

首页 > 解决方案 > 下拉 onChange 方法无法在 fluentui/react-northstar 中获取所选值

reactjs - 下拉 onChange 方法无法在 fluentui/react-northstar 中获取所选值

问题描述

我正在使用 fluentui/react-northstar 库。我正在使用下拉组件并使用 onChange 处理程序。我无法从 onChangeHandler 方法的下拉列表中获取当前选定的值。

我的代码片段

import React from "react";
import { Flex, Header, Dropdown } from '@fluentui/react-northstar';

class DropdownComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            inputItems: [
                'Robert Tolbert',
                'Wanda Howard',
                'Tim Deboer',
                'Amanda Brady',
                'Ashley McCarthy',
                'Cameron Evans',
                'Carlos Slattery',
                'Carole Poland',
                'Robin Counts',
            ]
        }
        this.onChangeHandler = this.onChangeHandler.bind(this);
    }
    onChangeHandler(e){
        //e => null
        //Need to get the selected value from dropdown
    }
    render() {
      return (
         <section>
            <Flex column gap="gap.small">
                <Header as="h4" content="Object" />
                <Dropdown
                     items={this.state.inputItems}
                     placeholder="Select your object"
                     checkable 
                     onChange={(e) => this.onChangeHandler(e)}
                 />
            </Flex>
        </section>
      );
    }
}

export default DropdownComponent;

有人可以提供有关如何从 onChange 处理程序获取所选值的详细信息。

标签： reactjsfluentui-react

解决方案

根据@fluentui/react-northstar@0.59.0 文档，从下拉列表中选择的值正在回调函数的第二个参数中传递或提供。

即，通过以下更改，它将起作用

      onChangeHandler(_, event) {
          console.log("selected value from dropdown ", event.value);
      }

和

      <Dropdown
         items={this.state.inputItems}
         placeholder="Select your object"
         checkable
         onChange={this.onChangeHandler}
      />

工作示例可以在这里找到，https://codesandbox.io/embed/lingering-sound-q2rw2?fontsize=14&hidenavigation= 1&theme=dark

推荐阅读