Question

我有一个组件，在该组件内部，我有2个下拉输入。

在componentDidMount期间，第一个下拉列表中的选项由对象提供。它工作正常，这里是示例对象（我们称之为Object1：

注意这里是示例代码

{ 
 Id: 1
 Title: Country1
 Region: NA
},
{ 
 Id: 2
 Title: Country2
 Region: SA
}

这是示例代码（请注意，我仅在数据库中存储ID）：

<option value={this.state.Object1[key].ID}>
                      {this.state.Object1[key].Title}
                    </option>

现在我的问题是，如果他们选择或保存的Region是“ NA”，我想隐藏第二个。另外请注意，该应用程序是我存储他们保存的ID的地方。

这是我到目前为止尝试过的。由于Id正在馈送给组件，因此似乎在加载组件期间尚未定义“ this.props.id”

<div
                className="col"
                hidden={
                  this.state.Object1[this.props.ID]
                    .OU === "NA"
                    ? false
                    : true
                }

我也尝试过这种方法，但是即使我选择了一个非“ NA”区域，类名称“ col-hidden”也被卡住并且没有改变

{this.props.ID && (
            <div
              className={
                "col " +
                (this.state.Object1[
                  this.props.ID
                ].OU ===
                  "NA")
                  ? "col-hidden"
                  : "test"
              }
            >
              <label htmlFor="Region">Region</label>
              <select
                id="SubRegion"
                name="SubRegion"
                onChange={this.props.onChange}
                className="custom-select"
                required
              >
                <option value="sample">Sample</option>
              </select>
            </div>
          )}

Answer 1

检查后，我只需要为下拉菜单的onChange创建函数

onst hideRegionFunction = e => {
  this.props.onChange(e);
  let self = this;
  let Region = this.state.Region;

  Region["isHidden"] = false;

  self.state.Object1.forEach(element => {
    if (element.ID == e.target.value && element.OU == "NA") {

      Region["isHidden"] = true;
    }
  });

  this.setState({ Region });

然后用它来隐藏我的第二列。我最初的问题是数字与索引不同

隐藏和显示组件

1 个答案: