[英]How to detect live changes on TextField in SwiftUI?
I have a simple TextField that binds to the state 'location' like this,我有一个简单的 TextField,它像这样绑定到状态“位置”,
TextField("Search Location", text: $location)
I want to call a function each time this field changes, something like this:每次此字段更改时,我都想调用一个函数,如下所示:
TextField("Search Location", text: $location) {
self.autocomplete(location)
}
However this doesn't work.然而这行不通。 I know that there are callbacks, onEditingChanged - however this only seems to be triggered when the field is focussed.
我知道有回调 onEditingChanged - 但是这似乎只有在聚焦该字段时才会触发。
How can I get this function to call each time the field is updated?每次更新字段时如何调用此函数?
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)
}
}
}
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
:从 iOS 14、macOS 11 或任何其他包含 SwiftUI 2.0 的操作系统开始,有一个名为
.onChange
的新修饰符可以检测给定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
}
}
}
For older iOS and other SwiftUI 1.0 platforms, you can use onReceive
:对于较旧的 iOS 和其他 SwiftUI 1.0 平台,您可以使用
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.如果您需要与
onChange
相同的行为,您可以使用组合并遵循@pawello2222 提供的答案。
Another solution, if you need to work with a ViewModel
, could be:如果您需要使用
ViewModel
,另一种解决方案可能是:
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)
}
}
Use onReceive
:使用
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)
}
}
}
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 有一个名为 onEditingChanged 的属性,该属性在编辑开始和编辑完成时调用。
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)
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 中的绑定调用更改,如下所示。
TextField("hint", text: $text.onChange({ (value) in
//do something here
}))
source : HackingWithSwift来源: HackingWithSwift
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.