React 原生道具 typescript

Question

这是通过接口的正确方法吗？ 如果没有请指导我。 谢谢！

这是我的界面

export interface Props {
  username: string;
  password: string;
  usernameTouched: boolean;
  passwordTouched: boolean;
}

这是我想知道这是否好的部分

export const Login: React.FC<Props> = (props) => {
  const [user, setUser] = useState<props.username>('');
  const [pass, setPass] = useState<props.password>('');
  const [userTouch, setUserTouch] = useState<props.usernameTouched>(false);
  const [passTouch, setPassTouch] = useState<props.passwordTouched>(false);

  const handleUsername = (username: string) => {
    setUser(username);
  };

  const handlePassword = (password: string) => {
    setPass(password);
  };

  const handleUserBlur = () => {
    setUserTouch(true);
  };

  const handlePassBlur = () => {
    setPassTouch(true)
  };

  const userError = !user && userTouch ? strings.username_required : undefined;

  const passError = !pass && passTouch ? strings.password_required : undefined;

  return (
    <KeyboardAvoidingView style={styles.container} behavior="padding">
      <Logo label="Fitness" style={styles.imageLogo} />
      <View style={styles.form}>
        <TextField
          onChangeText={handleUsername}
          value={user}
          placeholder={strings.user_placeholder}
          returnKeyType="next"
          onBlur={handleUserBlur}
          error={userError}
        />
        <TextField
          onChangeText={handlePassword}
          value={pass}
          placeholder={strings.pass_placeholder}
          returnKeyType="done"
          secureTextEntry={true}
          onBlur={handlePassBlur}
          error={passError}
        />
      </View>
    </KeyboardAvoidingView>
  );
}

顺便说一下，我只想澄清这是否好，如果不好，请帮助我，谢谢！

Answer 1

你可以使用：

export const Login = (props: Props) => {...}