Javascript 单击时不展开下拉列表，因为onChange赢得了'；t火

我正在使用react下拉列表为我的页面创建下拉列表

组成部分如下：

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

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

handleDropdownChange(e) {

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

handleDropdownChange的定义如下：

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

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

handleDropdownChange(e) {

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

但是，当我单击下拉列表时，它不会展开。此外，我在打印报表中没有收到任何信息。有人能帮我查一下这里的代码吗？我对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;

import React，{Component}来自“React”
从“反应下拉列表”导入下拉列表
导入“反应下拉列表/style.css”
从“../../api”导入api
从“样式化组件”导入样式化
导入“./Raise_MRN_Modal.css”；
const RaiseMRNForm=styled.div.attrs({
})`
高度：500px；
背景色：木瓜鞭；
`
const options=[“安全”、“耗材”、“机械”、“硬件”]
类MRNmodal扩展组件
{
建造师（道具）{
超级（道具）
此.state={
秀：道具秀，
关闭：道具，关闭，
孩子们：道具，孩子们，
价值观：“安全”，
}
}
准备组件状态（props）{
var usedProps=props | | this.props
此.state={
show:usedProps.show，
关闭：使用dprops.close，
儿童：usedProps.children，
}    
}
componentWillReceiveProps=async（nextProps）=>{
此.prepareComponentState（下一步操作）
}
componentWillMount=async（props）=>{
this.prepareComponentState（）
}
handleDropdownChange=选项=>{
log（'内部handleDropdownChange'，选项）；
this.setState（{value:option.label}）；
}
render（）{
var{clientName，itemName，show，close，children，value}=this.state
const defaultOption=选项[0]
返回(


)
}
}
导出默认MRNmodal；

代码的沙盒：

---

下拉列表的一次更改不会触发，因此值始终未定义。

handleDropdownChange接受

选项

不是事件：

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>
    );
  }
}

const options=[“安全”、“耗材”、“机械”、“硬件”]；
类MRNModal扩展组件{
状态={
价值：“安全”
};
handleDropdownChange=选项=>{
log（'内部handleDropdownChange'，选项）；
this.setState（{value:option.label}）；
};
render（）{
返回(
);
}
}

---

对于你的问题，我有两条建议

您的下拉列表未正确按下，因为有东西因为样式问题而阻止了下拉列表

您没有正确地将选项数组传递给下拉列表

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

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"
/>

this.state={
show:usedProps.show，
关闭：使用dprops.close，
儿童：usedProps.children，
选项：[“安全”、“消耗品”、“机械”、“硬件”]
}    
}

---

如果有帮助，请告诉我。

您应该添加一个沙箱，您没有提供可生产的示例显示整个沙箱。。。不仅是预览。。。这就是这个文件在下拉列表中的外观。我尝试将您的更改添加到代码中，但仍然无法正常工作。制作一个可生产的示例。它实际上在沙箱中工作，但在我的文件中不工作。我已经编辑了这个问题。请你看一下好吗？好吧，这就是没有人能猜到它为什么不能在你的机器上工作的答案。你能看一下更新的问题@Dennis Vash吗？非常感谢，这实际上是一个造型问题。未正确单击下拉列表。我重新排列了我的css，检查你是否正确，是的！再次感谢你！很乐意帮忙。我之所以想到这个问题，是因为我在初学者的时候也有同样的问题。