Question

我目前正在使用javascript / React，我在最后一个问题上遇到了一些问题。在我的窗口中，我有几个按钮，下面是一个下拉列表。想法是禁用此下拉列表。只有在您单击按钮时才会启用它，具体取决于已禁用参数。在按钮参数中，还有一个onClick（）执行其他操作（但在此函数的开头，我实现了一些代码，以便禁用中的值会发生变化）。这就是为什么我想使用 disabled 参数来启用/禁用下拉列表。所以这应该很容易......

以下是html的一部分：

<DropdownButton
        title={"Type : "}
        className="sequence-dropdown"
        disabled={true}
        key="sequence-dropdown"
        id="sequence-dropdown"
        >
        <MenuItem onClick={() => this.changeValue(value1)}>Value 1</MenuItem>
        <MenuItem onClick={() => this.changeValue(value2)}>Value 2</MenuItem>
        <MenuItem onClick={() => this.changeValue(value3)}>Value 3</MenuItem>

      </DropdownButton>

以下是应该启用下拉列表的代码，包含在函数changeValue（）中。

var statusDropdown = document.getElementById('sequence-dropdown').disabled;
if (statusDropdown === true) {
  console.log(document.getElementById('sequence-dropdown').disabled)
  document.getElementById('sequence-dropdown').disabled = false;
  console.log(document.getElementById('sequence-dropdown').disabled)
}
else if (statusDropdown === false) {
  //console.log(statusDropdownMapType)
  document.getElementById('sequence-dropdown').disabled = true;
  //console.log(statusDropdownMapType)
}

我没试过，但我想我可以简单地使用：

document.getElementById('sequence-dropdown').disabled = !document.getElementById('sequence-dropdown').disabled

但这不是问题所在。

我的问题是：按钮在开始时被禁用（带有一些灰色指示灯）。当我单击一个按钮时，灰色消失，组件样式正常，并且禁用参数已更改。

但是当我点击下拉列表时，列表不会出现......就像我只是点击一个按钮，没有任何反应......

有谁知道为什么？

Answer 1

我认为你应该使用

document.getElementById('sequence-dropdown').setAttribute("disabled","disabled"); 和 document.getElementById('sequence-dropdown').removeAttribute("disabled");

关于Halliballi

Answer 2

如果每次组件渲染时都设置disabled={true}，它将被禁用。我会使用另一种方法，如下：

constructor() {
  super();
  this.state = {disabled: true};
}

...

render () {
   const {disabled} = this.state;
   return (
       <DropdownButton
        title={"Type : "}
        className="sequence-dropdown"
        disabled={disabled}
        key="sequence-dropdown"
        id="sequence-dropdown">
           <MenuItem onClick={() => this.changeValue(value1)}>Value 1</MenuItem>
           <MenuItem onClick={() => this.changeValue(value2)}>Value 2</MenuItem>
           <MenuItem onClick={() => this.changeValue(value3)}>Value 3</MenuItem>
        </DropdownButton>
   );
}

然后，因为我可以看到你只将状态从禁用更改为启用和反之，当你点击按钮时，这就是方法：

this.setState((oldState) => {
   return {disabled: !oldState.disabled};
});

这种方式更多是React。希望它有所帮助。

下拉列表'已禁用'参数不起作用

2 个答案: