Question

我正在使用Meteor / React（使用Material-UI），我有一个应用程序从数据库中提取数据并在页面加载期间填充TextFields。当我尝试使用多行浮动标签时，浮动文本位于TextField中的字母顶部。我看到有几个地方人们试图破解他们的代码来避免这种情况。我觉得我不想这样做。然后，我检查了＆＃34;修复＆＃34;处于聚焦状态的浮动标签...因为我喜欢浮动标签的外观。在进行一些搜索之后，似乎较新的版本（1.0）不再支持标签的修复。有没有人有任何想法？如果我无法解决这个问题，我会尝试使用Ant Design。感谢。

Answer 1

这是一个简单的material-UI示例，可以看到浮动文本。我不确定你到底想要什么。请查看下面的示例，看看它是否符合您的要求。

import React from 'react';
import {TextField} from "material-ui";
class TestJS extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value : ""
        };
        this.autoFill = this.autoFill.bind(this);
        this.updateTextValue = this.updateTextValue.bind(this);
    }

    autoFill(){
        this.setState({value : "Test me"});
    }

    updateTextValue(event){
        this.setState({value : event.target.value});
    }

    render() {
        return(
            <div>
                <TextField
                    hintText="Message Field"
                    floatingLabelText="MultiLine and FloatingLabel"
                    multiLine={true}
                    rows={2}
                    onChange={this.updateTextValue}
                    value = {this.state.value}
                /><br />
                <button onClick={this.autoFill}> Auto Fill value</button>
            </div>

        );
    }
}

export default TestJS;

如何在多行TextField上实现浮动标签

1 个答案: