Phản ứng gốc - Sự khác biệt giữa onChange vs onChangeText của TextInput

Question

Tôi không chắc chắn khi nào sử dụng onChange so với onChangeText trong thành phần TextInput. Tôi biết onChangeText chấp nhận văn bản đã thay đổi dưới dạng arg trong cuộc gọi lại, nhưng đó là lý do tại sao bạn sẽ sử dụng changeText, vì sau đó bạn có thể cập nhật trạng thái trong cuộc gọi lại?

Answer 1

onChangeText về cơ bản là phiên bản đơn giản của onChange, vì vậy bạn có thể dễ dàng sử dụng, mà không gặp rắc rối khi chuyển qua event.target.value để nhận giá trị thay đổi. Vì vậy, khi bạn nên sử dụng onChange và khi onChangeText? Nếu bạn có hình thức đơn giản với vài textinputs, hoặc logic đơn giản, bạn có thể đi ngay lập tức và sử dụng onChangeText

<TextInput value={this.state.name} onChangeText={(text) => this.setState({name: text})}> 

Nếu bạn có hình thức phức tạp hơn và/hoặc bạn có logic hơn trong dữ liệu xử lý (như xử lý văn bản khác nhau từ số) khi người dùng thay đổi đầu vào, sau đó bạn tốt hơn với onChange, bởi vì nó mang lại cho bạn sự linh hoạt hơn. Ví dụ:

handleChange(event) { 
    const {name, type, value} = event.nativeEvent; 
    let processedData = value; 
    if(type==='text') { 
     processedData = value.toUpperCase(); 
    } else if (type==='number') { 
     processedData = value * 2; 
    } 
    this.setState({[name]: processedData}) 
} 

<TextInput name="username" type="text" value={this.state.username} onChange={this.handleChange}}> 
<TextInput name="password" type="number" value={this.state.password} onChange={this.handleChange}}>