如何在 SwiftUI 中检测 TextField 上的实时更改?

我有一个简单的 TextField,它像这样绑定到状态的“位置”,

TextField("Search Location", text: $location)

我想在每次这个字段变化的时候调用一个函数,像这样:

TextField("Search Location", text: $location) {
self.autocomplete(location)
}

但是这个不管用。我知道有回调,onEditingChanged-但是这似乎只有当字段被集中时才会触发。

如何让这个函数在每次字段更新时调用?

54880 次浏览

You can create a binding with a custom closure, like this:

struct ContentView: View {
@State var location: String = ""


var body: some View {
let binding = Binding<String>(get: {
self.location
}, set: {
self.location = $0
// do whatever you want here
})


return VStack {
Text("Current location: \(location)")
TextField("Search Location", text: binding)
}


}
}

Another solution, if you need to work with a ViewModel, could be:

import SwiftUI
import Combine


class ViewModel: ObservableObject {
@Published var location = "" {
didSet {
print("set")
//do whatever you want
}
}
}


struct ContentView: View {
@ObservedObject var viewModel = ViewModel()


var body: some View {
TextField("Search Location", text: $viewModel.location)
}
}

What I found most useful was that TextField has a property that is called onEditingChanged which is called when editing starts and when editing completes.

TextField("Enter song title", text: self.$userData.songs[self.songIndex].name, onEditingChanged: { (changed) in
if changed {
print("text edit has begun")
} else {
print("committed the change")
saveSongs(self.userData.songs)
}
})
.textFieldStyle(RoundedBorderTextFieldStyle())
.font(.largeTitle)

SwiftUI 2.0

From iOS 14, macOS 11, or any other OS contains SwiftUI 2.0, there is a new modifier called .onChange that detects any change of the given state:

struct ContentView: View {
@State var location: String = ""


var body: some View {
TextField("Your Location", text: $location)
.onChange(of: location) {
print($0) // You can do anything due to the change here.
// self.autocomplete($0) // like this
}
}
}

SwiftUI 1.0

For older iOS and other SwiftUI 1.0 platforms, you can use onReceive:

.onReceive(location.publisher) {
print($0)
}
**Note that** it returns **the change** instead of the entire value. If you need the behavior the same as the `onChange`, you can use the **combine** and follow the answer provided by @pawello2222.

iOS 13+

Use onReceive:

import Combine
import SwiftUI


struct ContentView: View {
@State var location: String = ""


var body: some View {
TextField("Search Location", text: $location)
.onReceive(Just(location)) { location in
// print(location)
}
}
}

While other answers work might work but this one worked for me where I needed to listen to the text change as well as react to it.

first step create one extension function.

extension Binding {
func onChange(_ handler: @escaping (Value) -> Void) -> Binding<Value> {
Binding(
get: { self.wrappedValue },
set: { newValue in
self.wrappedValue = newValue
handler(newValue)
}
)
}
}

now call change on the binding in TextField something like below.

  TextField("hint", text: $text.onChange({ (value) in
//do something here
}))

source : HackingWithSwift