Question

我正在尝试构建一个执行以下操作的自定义输入组件：

接受道具-完成
如果onFocus为true，则渲染“ V”图标-完成
验证输入：如果文本输入是“用文本填充”，则检查验证是否为真，如果为真：将“ V”图标颜色和ButtomBorderColor更改为绿色，如果为假：将“ V”图标颜色和ButtomBorderColor更改为红色，保持这种样式，直到inputField再次为空

class abstract AbstactScrathTest {

  @Autowired
  protected MyBean myBean;

  @ParameterizedTest
  @ValueSource(ints = {1, 3, 5, -3, 15, Integer.MAX_VALUE}) // six numbers
  void isOdd_ShouldReturnTrueForOddNumbers(int number) {
    myBean.doSomeThing(number)
  }

}

@Slf4j
@ExtendWith(SpringExtension.class)
@SpringBootTest
@ActiveProfiles("test1")
class ScrathTestWithTestProfile1 extends AbstractScrathTest{
}


@Slf4j
@ExtendWith(SpringExtension.class)
@SpringBootTest
@ActiveProfiles("test2")
class ScrathTestWithTestProfile2 extends AbstractScrathTest{
}

Answer 1

我建议您保持知道TextInput是否填充文本的状态值。

constructor(props) {
    super(props);
    this.state = {
      isTextFill: false,
      isFocused: false,
    };
}

然后在onChangeText触发时检查输入字段是否已填充文本。我创建了一个函数来保留条件和其余代码，这些代码已在onChangeText中用TextInput标明。

onChangeTextEvent(text){
   if(text.length > 0){
      this.setState({
         isTextFill : true
      })
   } else {
      this.setState({
         isTextFill : false
      })
   }
   this.updateInputVal(text, "confirmPassword"); //the function that you had called. I don't know why and where that is. 
}

然后，您可以使用条件运算符来管理代码。

return (
      <View style={[styles.container, viewStyle]}>
        <TextInput
          style={[styles.main, { borderBottomColor: this.state.isTextFill ? "green" : "red" }]}
          value={value}
          onBlur={() => this.onBlur()}
          onFocus={() => this.onFocus()}
          placeholder={placeholder}
          secureTextEntry={secureTextEntry}
          onChangeText={this.onChangeTextEvent.bind(this)}
        />
        {isFocused ? (
          <AntDesign
            name="checkcircle"
            size={18}
            color={this.state.isTextFill ? "green" : "red"}
            style={{ paddingTop: 8 }}
          />
        ) : (
          <View />
        )}
        {eyeIcon ? (
          <MaterialCommunityIcons
            name="eye-off"
            size={24}
            color={this.state.isTextFill ? "green" : "red"}
            style={{ paddingTop: 5, paddingLeft: 5 }}
          />
        ) : (
          <View />
        )}
      </View>
    );

使用状态构建自定义输入组件

1 个答案: