Question

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

Answer 1

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

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

材质UI浮动标签

1 个答案: