floatingLabelStyle`的`設置顏色時，側重於<TextField>

Question

隨着材料的UI <TextField>，我怎麼可以設置floatingLabel爲聚焦狀態的顏色？

如果我在floatingLabelStyle屬性中設置顏色，它會在未聚焦焦點時假定顏色。

謝謝。

Answer 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'}}); 
    }