Mert Köksal
Mert Köksal

Reputation: 901

TextField Copies all Fields the same in SwiftUI

When I type some text in one of the text fields, somehow it adds to all the text fields the same text at the same time. I am trying to separate them from each other so I can assign them correctly.

struct CardInfo : View {
    @State var creditCard : CreditCard
    @State var isSaved: Bool = false
    @State private(set) var text = ""
    var body: some View {
        VStack {
            CustomTextField(data: $text, tFtext: "Kartin Uzerindeki Isim", tFImage: "user")
                .textContentType(.givenName)
                .onReceive(Just(text)) { data in
                    self.creditCard.cardOwnerName = self.text
            }
            CustomTextField(data: $text, tFtext: "Kredi Kart Numarasi", tFImage: "credit")
                .textContentType(.oneTimeCode)
                .keyboardType(.numberPad)
                .onReceive(Just(text)) { data in 
                    self.creditCard.cardNumber = self.text
            }
struct CustomTextField: View {
    @Binding var data : String
    var tFtext: String = ""
    var tFImage: String = ""
    var body: some View {
        HStack {
                Image(tFImage)
                    .resizable()
                    .frame(width: 20, height: 20)
                    .padding()
                TextField(tFtext, text: $data)
                    .padding()
                    .font(Font.custom("SFCompactDisplay", size: 16))
                    .foregroundColor(.black)
            }
            .background(RoundedRectangle(cornerRadius: 10))
            .foregroundColor(Color(#colorLiteral(red: 0.9647058824, green: 0.9725490196, blue: 0.9882352941, alpha: 1)))
    }
}

enter image description here

Upvotes: 1

Views: 165

Answers (1)

pawello2222
pawello2222

Reputation: 54466

You need to use separate @State variables for each TextField:

struct CardInfo : View {
    @State var creditCard : CreditCard
    @State var isSaved: Bool = false
    @State private(set) var cardOwnerName = ""
    @State private(set) var cardNumber = ""

    var body: some View {
        VStack {
            CustomTextField(data: $cardOwnerName, tFtext: "Kartin Uzerindeki Isim", tFImage: "user")
                .textContentType(.givenName)
                .onReceive(Just(cardOwnerName)) { data in
                    self.creditCard.cardOwnerName = data
            }
            CustomTextField(data: $cardNumber, tFtext: "Kredi Kart Numarasi", tFImage: "credit")
                .textContentType(.oneTimeCode)
                .keyboardType(.numberPad)
                .onReceive(Just(cardNumber)) { data in 
                    self.creditCard.cardNumber = data
            }
            ...
        }
    }
}

Upvotes: 1

Related Questions