reactjs - 在 Material Design Light 和 React 中动态设置 Textfield 值时标签不 float

Question

当我动态设置值(即不通过键入更新 Prop )时，标签不会移开。

我的代码是

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