Question

我正在使用 react-dropdown 为我的页面创建一个下拉菜单。

组件如下：

<Dropdown options={options} onChange={this.handleDropdownChange} placeholder="Select an option" />

选项的定义如下：

const options = ['Safety', 'Consumable', 'Machinery', 'Hardware']

handleDropdownChange 的定义如下：

handleDropdownChange(e) {

    console.log('Inside handleDropdownChange')
    this.setState({ selectValue: e.target.value });
  }

但是，当我单击下拉列表时，下拉列表不会扩展。此外，我的打印声明中没有任何消息。有人可以在这里提供代码帮助我吗？我对React JS比较陌生。谢谢！

演示

这是整个文件：

import React, { Component } from 'react'
import Dropdown from 'react-dropdown'
import 'react-dropdown/style.css'
import api from '../../api'
import styled from 'styled-components'
import './Raise_MRN_Modal.css';


const RaiseMRNForm = styled.div.attrs({

})`

    height : 500px;
    background-color : papayawhip;
`

const options = ['Safety', 'Consumable', 'Machinery', 'Hardware']


class MRNmodal extends Component 
{
    constructor(props) {
        super(props)


        this.state = {

            show : props.show,
            close : props.close,
            children : props.children,
            value: 'Safety',
        }

    }

    prepareComponentState (props) {
    var usedProps = props || this.props

    this.state = {

            show : usedProps.show,
            close : usedProps.close,
            children : usedProps.children,
        }    

    }

    componentWillReceiveProps = async (nextProps) => {

        this.prepareComponentState(nextProps)
    }


    componentWillMount = async (props) => {

        this.prepareComponentState()
    }

    handleDropdownChange = option => {
    console.log('Inside handleDropdownChange ', option);
    this.setState({ value: option.label });
    }


    render() {

        var { clientName, itemName, show, close, children, value } = this.state
        const defaultOption = options[0]


    return (
            <div>
            <div className="modal-wrapper"
                style={{
                    transform: show ? 'translateY(0vh)' : 'translateY(-100vh)',
                    opacity: show ? '1' : '0'
                }}>

                <RaiseMRNForm>
                    <br/>

                    <Dropdown
                    value={this.state.value}
                    options={options}
                    onChange={this.handleDropdownChange}
                    placeholder="Select an option"
                    />
                </RaiseMRNForm>               
            </div>
        </div>
    )
    }
}

export default MRNmodal;

代码为https://codesandbox.io/s/lucid-babbage-r94u3的沙盒。

DropDown的onChange不会触发，因此值始终未定义。

Answer 1

handleDropdownChange不接受option不是事件：

const options = ['Safety', 'Consumable', 'Machinery', 'Hardware'];

class MRNModal extends Component {
  state = {
    value: 'Safety'
  };

  handleDropdownChange = option => {
    console.log('Inside handleDropdownChange ', option);
    this.setState({ value: option.label });
  };

  render() {
    return (
      <div>
        <Dropdown
          value={this.state.value}
          options={options}
          onChange={this.handleDropdownChange}
          placeholder="Select an option"
        />
      </div>
    );
  }
}

Answer 2

对于您的问题，我有两个建议。

您的下拉菜单未正确按下，因为由于样式问题，某些东西阻止了下拉菜单。
您尚未将选项数组正确传递给下拉列表。

在这种情况下，您可以将“选项”数组置于状态并从那里访问它。

this.state = {

        show : usedProps.show,
        close : usedProps.close,
        children : usedProps.children,
        options : ['Safety', 'Consumable', 'Machinery', 'Hardware']
    }    

}

<Dropdown
    value={this.state.value}
    options={this.state.options}
    onChange={this.handleDropdownChange}
    placeholder="Select an option"
/>

让我知道这是否有帮助。

下拉菜单无法按一下展开，因为onChange不会触发

演示

2 个答案: