Как передать данные из пользовательского компонента TexInput в основной компонент Login

Question

У меня проблемы при аутентификации пользователей в моем приложении, у меня есть компонент с именем MaterialMessageTextBox11, внутри которого есть <TextInput>, поэтому мне удалось получить значение, которое пользователь вводит во входные данные, и сохранить его в состояние, но мне нужно получить доступ к этому значению (которое будет логин и пароль) в главном компоненте (который будет Логин. js), чтобы затем иметь возможность проверить введенные данные, однако я Невозможно пройти через владение или навигацию, спасибо за помощь!

КОД:

Логин. js:

class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: null,
      password: null,
      isLogged: false,
    };
  }

  render() {
    if (this.state.isLogged) {
      this.props.navigation.navigate("Dashboard");
    }

    return (
      <View style={styles.container}>

        <MaterialMessageTextbox11
          style={styles.materialMessageTextbox11}
          handlePress={this.setMyText}


        />

        <MaterialMessageTextbox12
          style={styles.materialMessageTextbox12}

        />
      </View>
    );
  }
}

MaterialMessageTextBox11, js (пользовательский компонент TextInput):

function MaterialMessageTextbox11(props) {

let [username, setUsername] = useState("");


  return (
    <View style={[styles.container, props.style]}>
      <TextInput
        placeholder=""
        onChangeText={(value) => setUsername(value)}

        style={[
          styles.inputStyle,
          {
            borderBottomColor: props.error
              ? "red"
              : props.success
              ? "green"
              : "#D9D5DC",
          },
        ]}
      ></TextInput>

    </View>
  );
}

Answer 1

Если вы хотите создать и использовать Custom Textinput, вы можете установить его следующим образом.

Textinput. js

 <TextInput 
      value={value} 
      onChangeText={onChange}
      placeholder=""
      style={[
          styles.inputStyle,
          {
            borderBottomColor: props.error
              ? "red"
              : props.success
              ? "green"
              : "#D9D5DC",
          },
        ]} />

Использование

        <MaterialMessageTextbox11
          style={styles.materialMessageTextbox11}
          value={this.state.username}
          onChange={input => this.setState({ username: input })}
        />