Question

当我单击垂直的文本输入字段时，我想更改文本输入下划线的颜色，目前，我有两个用于电子邮件和密码的文本输入字段，并且我已经使用onfocus和onblur创建了用于textinput和iam的组件，我的问题是当我单击任意一个字段时，这两个字段都被聚焦了。我只想突出显示textinput我点击我创建的CustomTextInput组件，

 const CustomTextInput = props => {
              return (
                <View style={props.containerStyles || styles.container}>
                  <TextInput
                    style={props.styles || styles.textInput || styles.textArea }
                    onChangeText={text => {
                      props.onChangeText(text, props.inputValue);
                    }}
                    value={props.value}
                    underlineColorAndroid={"transparent"}
                    placeholder={props.placeholder}
                    onFocus={event => {props.onFocus(event, props.placeholder);
                    }}
                    onBlur={event => {props.onBlur(event);
                    }}
                    allowFontScaling={true}
                    secureTextEntry={
                      props.inputValue === "password" ||
                      props.inputValue === "retypePassword"
                        ? true
                        : false
                    }
                    placeholderTextColor={AppStyles.color.COLOR_FADED_BLACK}

                    multiline={props.multiline}
                    numberOfLines={props.numberOfLines}
                    maxHeight={Metrics.screenHeight * 0.1 || props.maxHeight}
                    autoCapitalize={
                      props.inputValue === 'email' || props.inputValue === 'password' ? 
                    props.autoCapitalize : 'sentences'}
               />
                </View>
              );
            };

本地页面，我在其中调用这些textinput组件并应用onfocus和onbblur

state = {
        isFocused : false,
      };
renderInputField(placeHolderText, inputValue) {
        const { isFocused } = this.state;
        const {onFocus, onBlur, ...otherProps} = this.props;
        return (
          <TextInput
           placeholder={placeHolderText}
            onChangeText={this.onChangeText}
            value={this.state[inputValue]}
            inputValue={inputValue}
            autoCapitalize={'none'}
            containerStyles={ isFocused ? styles.containerfocus : styles.containerStyles}
            onFocus={this.onFocus}
            onBlur={this.onBlur}
          />
        );
      }

     onFocus = (event,placeholder) =>{
     if(this.props.onFocus){
          this.props.onFocus(event);
        }
      };
      onBlur = event =>{
        this.setState({ isFocused: false});
        if(this.props.onBlur){
          this.props.onBlur(event);
        }
      };

Answer 1

您在两个字段上都使用isFocused状态您应该执行以下操作

 onFocus={()=>this.onFocus('username')}

 onFocus=(field)=>{this.setState({isFocused:field})};
//you will have to change the isFocused to something meaningful like focussedField

并基于此选择容器样式

containerStyles={ isFocused=='username' ? styles.containerfocus : styles.containerStyles }

这样，您可以拥有多个字段并更改它们的焦点并正确设置样式。

单击时如何更改文本输入下划线的颜色？

1 个答案: