聚焦 <TextField> 时设置 `floatingLabelStyle` 的颜色

【问题标题】：Set color of `floatingLabelStyle` when focused on <TextField>聚焦 <TextField> 时设置 `floatingLabelStyle` 的颜色
【发布时间】：2016-05-30 03:55:12
【问题描述】：

使用material-ui <TextField>，如何设置floatingLabel的颜色为焦点状态？

如果我在floatingLabelStyle 属性中设置颜色，它会在聚焦或不聚焦时假定该颜色。

谢谢。

【问题讨论】：

标签： material-ui

【解决方案1】：

您可以在您的状态中设置颜色，然后使用onFocus 事件更改状态。下面是一个简单的示例。

原始应用状态（es6构造函数）：

  constructor() {
        this.state = {
            floatingErrorText: 'This field is required.',      
            floatingTextColor: {color: 'blue'}
        }
    }

您的文本字段：

<TextField
     hintText="Project Name"
     errorText={this.state.floatingErrorText}
     floatingLabelText="Project Name"
     floatingLabelStyle={this.state.floatingTextColor}
     onFocus={this.handleFocus.bind(this)} />

然后要更改状态，请使用以下内容：

    handleFocus(){
        this.setState({floatingTextColor: {color: 'orange'}});
    }

【讨论】：

酷。谢谢凯西。