0

当我单击特定的文本输入字段时，我想更改文本输入下划线的颜色，目前我有两个用于电子邮件和密码的文本输入字段，并且我已经为 textinput 和 iam 使用 onfocus 和 onblur 创建了组件，我的问题是当我单击在任何一个字段上，这两个字段都变得专注。我只想突出显示我单击我创建的 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>
              );
            };

我在其中调用这些文本输入组件并应用 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);
        }
      };
4

1 回答 1

0

您正在为两个字段使用状态中的 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 }

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

于 2020-06-08T08:18:55.993 回答