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

Question

我正在尝试完成我在下面发布的内容，我发现了一些使用 onChange 和 onChangeText 但没有好的文档。有人可以在下面发表一篇好文章或解释！感谢您的任何见解！

  constructor() {
    super();

    this.state = {
      color1: '#FF0000'};}
  
  
        {/* Email Input */}
      <Container style = {styles.emailInput}>
        
        <Form>
          <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>
       </Form>
      </Container>

 emailInput: {
    flex: 1,
    backgroundColor: '#1E2028',
    width: 350,
    position: 'absolute',
    top: 225,
    left: 3

  }

Answer 1

您可以将以下内容放入输入中

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

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

这样，当输入框在焦点上时，textcolor会变成蓝色，当用户点击其他地方时，它会变成红色

举个例子，请尝试以下方法

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,
  },


  
});

您也可以访问此链接查看： https://snack.expo.io/71LpKDzvS

附加信息

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

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

 
            />

看看效果。