Javascript 当输入处于活动状态时更改标签文本颜色

我正在努力完成我在下面发布的内容，我发现一些东西使用了onChange和onChangeText，但没有很好的文档。有人能在下面发表一篇好文章或一个解释吗！感谢您的任何见解

constructor（）{
超级（）；
此.state={
颜色1:“#FF0000”}；}
{/*电子邮件输入*/}
onFocus={（）=>this.setState（{color1:'#A2A2A2'}）}
onClick={（）=>this.setState（{color1:'###F7018D'}）}
onBlur={（）=>this.setState（{color1:'#A2A2A2'}）}
电子邮件地址
电子邮件输入：{
弹性：1，
背景颜色：“#1E2028”，
宽度：350，
位置：'绝对'，
排名：225，
左：3
}

您可以在输入中输入以下内容

onFocus={() => this.setState({color1: '#0000FF'})}
  onClick={() => this.setState({color1: '#0000FF'})}
  onBlur={() => this.setState({color1: '#FF0000'})}

然后在样式部分，使用“this.state.color1”作为文本颜色

这样，当输入框处于焦点时，文本颜色将变为蓝色，当用户单击其他位置时，文本颜色将变为红色

为了给你一个例子，请尝试以下方法

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  TextInput,
  Text,
} from 'react-native';
//import all the components we are going to use.

export default class App extends Component {

  constructor() {
    super();

    this.state = {
      color1: '#FF0000'};}

    

  
  render() {
    return (
      <View style={styles.MainContainer}>
        <TextInput
 
    style={{color:this.state.color1 , borderWidth: 1,
    borderColor: '#DD0000',}}
placeholder="Type something"
  onFocus={() => this.setState({color1: '#0000FF'})}
  onClick={() => this.setState({color1: '#0000FF'})}
  onBlur={() => this.setState({color1: '#FF0000'})}


        />

<TextInput value="TEST2"/>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    alignItems: 'center',
    flex: 1,
    margin: 10,
    marginTop: 60,
  },


  
});

import React，{Component}来自'React'；
进口{
样式表，
看法
文本输入，
文本，
}从“反应本机”；
//导入我们将要使用的所有组件。
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
颜色1:“#FF0000”}；}
render（）{
返回(
this.setState（{color1:'#0000FF'}）}
onClick={（）=>this.setState（{color1:'#0000FF'}）}
onBlur={（）=>this.setState（{color1:'#FF0000'}）}
/>
);
}
}
const styles=StyleSheet.create({
主容器：{
对齐项目：“居中”，
弹性：1，
差额：10，
玛金托普：60，
},
});

您也可以访问此链接查看：

补充资料

对于修改后的代码，请更改

 <Item floatingLabel style={{color:this.state.color1}} >
          onFocus={() => this.setState({color1: '#A2A2A2'})}
          onClick={() => this.setState({color1: '##F7018D'})}
          onBlur={() => this.setState({color1: '#A2A2A2'})}
           <Label>
           Email Address</Label>
           <Input
          autoCorrect={false}
          autoCapitalize="none"
 
            />

onFocus={（）=>this.setState（{color1:'#A2A2A2'}）}
onClick={（）=>this.setState（{color1:'###F7018D'}）}
onBlur={（）=>this.setState（{color1:'#A2A2A2'}）}
电子邮件地址

到

电子邮件地址
this.setState（{color1:'#A2A2A2'}）}
onClick={（）=>this.setState（{color1:'###F7018D'}）}
onBlur={（）=>this.setState（{color1:'#A2A2A2'}）}
/>

---

看看效果。

这里有一个类似的问题，您正在寻找。这使用的是react本地纸张，除非我需要，否则我不想使用它，所以我将您给我的代码粘贴到输入中，并在我的样式部分中编写了“color:”This.state.color1“，对吗？我需要进口什么东西吗？这样就可以完成任务了。。。我需要我的标签改变颜色，而不是实际的输入。我试着在我的标签和我的商品中玩弄它，但不能完全让任何事情顺利进行。我觉得你已经提供了足够的信息！我很接近，我能感觉到。我更新了我的尝试，在轻微的变化，我无法理解，虽然，介意看看我更新的代码和帮助吗？请查看“附加信息”部分，然后尝试。谢谢你！非常感谢你！！我真的很感谢你抽出时间。

 <Item floatingLabel style={{color:this.state.color1}} >
          onFocus={() => this.setState({color1: '#A2A2A2'})}
          onClick={() => this.setState({color1: '##F7018D'})}
          onBlur={() => this.setState({color1: '#A2A2A2'})}
           <Label>
           Email Address</Label>
           <Input
          autoCorrect={false}
          autoCapitalize="none"
 
            />

 <Item floatingLabel  >
           <Label style={{color:this.state.color1}}>
           Email Address</Label>
           <Input
          autoCorrect={false}
          autoCapitalize="none"
          onFocus={() => this.setState({color1: '#A2A2A2'})}
          onClick={() => this.setState({color1: '##F7018D'})}
          onBlur={() => this.setState({color1: '#A2A2A2'})}

 
            />