防止使用onChangeText函数的FlatList元素在每个按键上重新呈现

Question

我的项目有一个带有Custom Allergies的屏幕，用户可以设置该屏幕。一切都按预期进行，除了每当用户去编辑这些Custom Allergies中的一个时，键盘在每次按键时都消失了，因为他们输入的文本字段没有被聚焦，因为该组件在每个按键上都被重新渲染。按键。

从许多类似的问题中搜索，听起来好像是因为每次重新渲染组件时都会重新创建函数。因此，该函数需要重新编写以防止出现这种情况。

函数为onChangeText={v => handleChangeCustomAllergyText(item.id, v)}

我尝试了几种不同的方法，包括尝试实现.bind(this)，但是我做不到。我该如何写，以便用户可以在此字段中进行编辑/键入而不会在每次按键时都消失键盘。谢谢。

class Allergies extends React.Component<Props, State> {

//Part of something I've tried:
//constructor(props) {
//        super(props);
//        const { handleChangeCustomAllergyText } = this.props.navigation.state.params;
//        this.handleChangeCustomAllergyText = handleChangeCustomAllergyText;
//        this.handleChangeCustomAllergyText = this.handleChangeCustomAllergyText.bind(this);
//};

renderCustomAllergies = ({ item }) => {
   const { handleChangeCustomAllergyText } = this.props.navigation.state.params;

   return (
      <View>                
         <TextField
            autoFocus={false}
            id={item.id}
            value={item.label}
            onChangeText={v => handleChangeCustomAllergyText(item.id, v)}   <---original works but re-renders
            //onChangeText={v => handleChangeCustomAllergyText(item.id, v).bind(this)}   <-- tried, not working
            //onChangeText={this.handleChangeCustomAllergyText(item.id, this.value)}   <-- tried, not working
          />
      </View>
   );
};


render() {
   return (
      <FlatList
         data={toJS(getCustomAllergies().get())}
         keyExtractor={({ label }) => `${label}`}
         renderItem={this.renderCustomAllergies}
      />
   );
}

export default Allergies;

如果需要的话，这是容器文件中的原始功能，该功能作为Navigation.params传递：

handleChangeCustomAllergyText = (id: string, text: string): void => {
   if (text === "") {
      return this.props.healthProfileStore.removeCustomAllergy(id);
   }

   this.props.healthProfileStore.setCustomAllergyTextFields(id, text);
};