React Native：自定义输入的 onFocus 和 onBlur

Question

在我的 React Native 项目中，我创建了一个自定义输入组件，我们称它为“CustomInput”。这只是 returns 一个标准 .

const CustomInput = (props) => {
  return (
    <TextInput
      style={{
        backgroundColor: "white",
        padding: 10,
        borderWidth: 1,
        borderColor: "#eee",
        borderRadius: 2,
        marginBottom: 12,
      }}
      placeholder={props.placeholder}
      value={props.value}
    ></TextInput>
  );
};

我想在父组件中调用它，例如：

<CustomInput
  placeholder="Family Name"
  value={this.state.familyName}
  onChangeText={(text) => this.setState({ familyName: text })}
/>;

如何在用户聚焦时动态地使用 onFocus() 和 onBlur() 方法来突出显示它们？

如果我不使用自定义输入，我可以这样做：

<TextInput
  ref={(input) => {
    this.inputFullName = input;
  }}
  style={styles.loginTextInput}
  placeholder="Fullname"
  value={this.state.fullName}
  onChangeText={(text) => this.setState({ fullName: text })}
  onFocus={() => this.focusedInput(this.inputFullName)}
  onBlur={() => this.blurInput(this.inputFullName)}
/>;

focusedInput = (inputField) => {
  inputField.setNativeProps({
    style: { borderColor: "#4094ec" },
  });
};

Answer 1

您可以在道具中添加它们：

const CustomInput = (props) => {
  return (
    <TextInput
      style={{
        backgroundColor: "white",
        padding: 10,
        borderWidth: 1,
        borderColor: "#eee",
        borderRadius: 2,
        marginBottom: 12,
      }}
      placeholder={props.placeholder}
      value={props.value}
      onFocus={() => props.onFocus()}
      onBlur={() => props.onBlur()}
    ></TextInput>
  );
};

并这样称呼它：

<CustomInput
  placeholder="Family Name"
  value={this.state.familyName}
  onChangeText={(text) => this.setState({ familyName: text })}
  onFocus={() => yourFunctionForOnFocus()}
  onBlur={() => yourFunctionForOnBlur()}
/>;

Answer 2

解决方案是在转发 ref 和传递函数之间混淆：

const CustomInput = React.forwardRef((props, ref) => (
  <TextInput
    ref={ref}
    style={{
      backgroundColor: "white",
      padding: 10,
      borderWidth: 1,
      borderColor: "#eee",
      borderRadius: 2,
      marginBottom: 12,
    }}
    onChangeText={props.onChangeText}
    placeholder={props.placeholder}
    value={props.value}
    onFocus={props.onFocus}
    onBlur={props.onBlur}
  ></TextInput>
));

在父组件中调用：

<CustomInput
  ref={(input) => {
    this.inputLastName = input;
  }}
  placeholder={i18n.t("enterLastName")}
  value={this.state.familyName}
  onChangeText={(text) => this.setState({ familyName: text })}
  onFocus={() => this.focusedInput(this.inputLastName)}
  onBlur={() => this.blurInput(this.inputLastName)}
/>;

React Native：自定义输入的 onFocus 和 onBlur

React Native: onFocus and onBlur for custom inputs

onfocus

onblur

react-native