材质 UI 浮动标签答案

【问题标题】：Material UI floating label材质 UI 浮动标签
【发布时间】：2018-08-09 12:46:42
【问题描述】：

有没有人找到解决材料 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
  };
};

【问题讨论】：

添加一些代码...
能否请您提供一些您已实现文本字段组件的代码。
我更新了它:)
我不知道 material-ui 的问题，但是如果你想使用带有通用 HTML 输入的浮动标签，你可以看看这个库 react-styled-floating-label。
当前版本修复了这个bug吗？

标签： reactjs label material-ui

【解决方案1】：

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

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

【讨论】：