时间戳

首页 > 解决方案 > 材质 UI 浮动标签

reactjs - 材质 UI 浮动标签

问题描述

有没有人找到材料 UI 和 React 文本字段不自动浮动标签的解决方案例子。谢谢 这是我正在使用它的组件，关键是通过 Redux 从另一个组件传递，主要数据来自 localStorage。结果在 Firefox 和 Chrome 中是相同的：

class UpdateForm extends Component {
  state = {
    dataTask: ''
  };
  componentDidMount() {
    if (this.props.selectedTask !== null) {
      const selectedTaskData = JSON.parse(localStorage.getItem(this.props.selectedTask));
      this.setState({dataTask: selectedTaskData});
    }
  }
  render() {
    return (
      <div className="rootComponent">
        <form className="textFields">
          <div className="rowFieldsUpdate">
            <TextField className="fieldUpdate"
              data-testid="update-id"
              label="ID"
              value={this.state.dataTask.ID}
            />
            <TextField className="fieldUpdate"
              data-testid="update-Username"
              label="Username"
              value={this.state.dataTask.username}
            />
            <TextField className="fieldUpdate"
              data-testid="update-lastname"
              label="Last Name"
              value={this.state.dataTask.lastName}
            />
          </div>
          <div className="rowFieldsUpdateSecond">
            <TextField className="fieldUpdate"
              data-testid="update-firstname"
              label="First Name"
              value={this.state.dataTask.firstName}
            />
            <TextField className="fieldUpdate"
              data-testid="update-email"
              label="Email"
              value={this.state.dataTask.email}
            />
          </div>
          <UpdateDialogWindow />
        </form>
      </div>
    );
  };
};

const mapStateToProps = state => {
  return {
    selectedTask: state.updateStates.selectedTask
  };
};

标签： reactjslabelmaterial-ui

解决方案

这可能是一个奇怪的 material-ui 错误。似乎有一个错误，如果将 TextField 的初始值设置为undefined或null代替空字符串（或其他字符串值），则会导致这个奇怪的问题。您可以尝试将初始状态设置为以下内容：

state = {
    dataTask: {
        ID: ''
        username: ''
        ... rest of your fields
    }
}

推荐阅读