放大SwiftUI Authenticator UI，如何将输入字段数组绑定到TextField

Question

我正在 SwiftUI 中使用 Authenticator UI 组件编写 CustomSignUpView。

任何人都可以给我一个如何将电话号码或电子邮件字段绑定到我的文本字段的示例吗？

我尝试了以下方法，但不起作用

struct LoginScreen: View {
    var body: some View {
        Authenticator(
            signUpContent: { state in
                CustomSignUpView(state: state)
            }
        ) { _ in }
    }
}

struct CustomSignUpView: View {
   @ObservedObject var state: SignUpState
   var body: some View {
      TextField("number", text: $state.fields[0].value)
   }
}

Answer 1

一般来说，您应该将 TextField 绑定到特定属性，例如

@State

，而不是直接绑定到数组中的元素，例如

$state.fields[0].value

。为了解决这个问题，您可以向

SignUpState

添加一个新属性，允许您根据特定条件直接访问电子邮件或电话号码字段。

以下是修改 CustomSignUpView 来实现此目的的方法：

struct CustomSignUpView: View {
    @ObservedObject var state: SignUpState
    
    var body: some View {
        VStack {
            if state.isEmailSignUp {
                TextField("Email", text: $state.email)
            } else {
                TextField("Phone Number", text: $state.phoneNumber)
            }
        }
    }
}

class SignUpState: ObservableObject {
    /// For toggling between email and phone number
    @Published var isEmailSignUp: Bool = true 
    @Published var email: String = ""
    @Published var phoneNumber: String = ""
}

Answer 2

我从 Amplify 团队获得了干净的解决方案，

struct CustomSignUpView: View {
    @ObservedObject var state: SignUpState
    
    var body: some View {
        VStack {
            ForEach(state.fields, id: \.self) { field in
                CustomField(field)
            }

            Button("Sign Up") {
                Task {
                    try? await state.signUp()
                }
            }
        }
    }
}

struct CustomField: View {
    @ObservedObject private var signUpField: SignUpState.Field
    
    init(_ signUpField: SignUpState.Field) {
        self.signUpField = signUpField
    }
    
    var body: some View {
        /// Display the field accordingly, for example:
        switch signUpField.field.attributeType {
        case .username:
            TextField("Username", text: $signUpField.value)
        case .password:
            SecureField("Password", text: $signUpField.value)
        case .passwordConfirmation:
            SecureField("Confirm password", text: $signUpField.value)
        case .phoneNumber:
            TextField("Phone Number", text: $signUpField.value)
        case .email:
            TextField("Email", text: $signUpField.value)
        /// ... etc
        }
    }
}