Question

我有一个API端点，可以接收对象的ID或名称，但不能同时接收两者。我正在尝试在select参数内进行嵌套。当我使用下面的代码时，在方案中，嵌套字段不会出现。我想念什么吗？

    this.state = {
      isEditing: this.props.isEditing || false,
      text: this.props.text || ""
    };
  }

  componentDidUpdate(prevProps) {
    if (prevProps.text !== this.props.text) {
      this.setState({
        text: this.props.text || ""
      });
    }

    if (prevProps.isEditing !== this.props.isEditing) {
      this.setState({
        isEditing: this.state.isEditing || this.props.isEditing || false
      });
    }
  }

  isTextValueValid = () => {
    return (
      typeof this.state.text !== "undefined" &&
      this.state.text.trim().length > 0
    );
  };

  handleFocus = (value) => {
    if (this.state.isEditing) {
      if (typeof this.props.onFocusOut === "function") {
        this.props.onFocusOut(this.state.text, value.target.name);
      }
    } else {
      if (typeof this.props.onFocus === "function") {
        this.props.onFocus(this.state.text);
      }
    }

    if (this.isTextValueValid()) {
      this.setState({
        isEditing: !this.state.isEditing
      });
    } else {
      if (this.state.isEditing) {
        this.setState({
          isEditing: this.props.emptyEdit || false
        });
      } else {
        this.setState({
          isEditing: true
        });
      }
    }
  };

  handleChange = () => {
    this.setState({
      text: this.textInput.value
    });
  };

  handleKeyDown = (e) => {
    if (e.keyCode === ENTER_KEY_CODE) {
      this.handleEnterKey(e);
    }
  };

  handleEnterKey = (value) => {
    this.handleFocus(value);
  };

  render() {
    if (this.state.isEditing) {
      return (
        <div>
          <input
            type="text"
            name={this.props.field}
            className={this.props.inputClassName}
            ref={(input) => {
              this.textInput = input;
            }}
            value={this.state.text}
            onChange={this.handleChange}
            onBlur={this.handleFocus}
            onKeyDown={this.handleKeyDown}
            style={{
              width: this.props.inputWidth,
              height: this.props.inputHeight,
              fontSize: this.props.inputFontSize,
              fontWeight: this.props.inputFontWeight,
              borderWidth: this.props.inputBorderWidth
            }}
            maxLength={this.props.inputMaxLength}
            placeholder={this.props.inputPlaceHolder}
            tabIndex={this.props.inputTabIndex}
            autoFocus
          />
        </div>
      );
    }

    const labelText = this.isTextValueValid()
      ? this.state.text
      : this.props.labelPlaceHolder || "";
    return (
      <div>
        <label
          className={this.props.labelClassName}
          onClick={this.handleFocus}
          style={{
            fontSize: this.props.labelFontSize,
            fontWeight: this.props.labelFontWeight
          }}
        >
          {labelText}
        </label>
      </div>
    );
  }
}

Answer 1

两个选择选项（"label": "ID"和"label": "Name"）都缺少value字段，因此，即使您选择其中一个，平台的行为也好像没有选择任何东西，并且嵌套字段保持隐藏状态。

要解决此问题，只需在相应的标签下方添加"value": "id"和"value": "name"，如以下documentation example所示。请注意，这些值不需要与嵌套的字段名称相对应，它们只需要在父select选项列表中唯一。

结果代码如下：

[
    {
        "type": "select",
        "name": "searchBy",
        "label": "Select",
        "options": [
            {
                "label": "ID",
                "value": "id",
                "nested": [
                    {
                        "name": "id",
                        "type": "number",
                        "label": "ID"
                    }
                ]
            },
            {
                "label": "Name",
                "value": "name"
                "nested": [
                    {
                        "name": "name",
                        "type": "text",
                        "label": "Name"
                    }
                ]
            }
        ]
    }
]

自定义Integromat应用程序中select参数的嵌套字段

1 个答案: