Question

当我动态设置值（即不通过输入更新道具）时，标签不会移开。

我的代码是

  render: function() {
    // Removed some minor logic here that isn't related
    return(
      <div className={classes}>
        <div className={_mdlInputClassNames} ref="inputContainer">
          <input
            ref="input"
            type="text"
            id={this.props.id}
            className="mdl-textfield__input"
            data-upgraded
            name={this.props.name}
            value={this.props.value}
            onKeyDown={this.props.onKeyDown}
            onKeyUp={this.props.onKeyUp}
            onChange={this._onChange}
            onBlur={this.props.onBlur}
            autoComplete="off" />
          <label
            htmlFor={this.props.id}
            className="mdl-textfield__label" >
              {this.props.label}
          </label>
          <div className={msgClasses}>{msg}</div>
        </div>
      </div>
    );
  },


  componentDidUpdate: function() {
    // THIS DOESNT DO ANYTHING
    // var inputContainer = this.refs.inputContainer.getDOMNode();
    // componentHandler.upgradeElement(inputContainer, 'MaterialTextfield');
  },

根据我在网上找到的内容，升级元素应该可行。但它没有做任何事情。

看看DOM元素，它上面已经有一个is-upgraded类，而不是is-dirty类，它似乎实际上移动了标签。

任何帮助都会很棒

Answer 1

这对我有用：

$("#inputId").val("thevalue").parent().addClass("is-dirty");

在Material Design Light和React中动态设置Textfield值时，Label不会浮动

1 个答案: