React Native 如何避免重新呈现文本输入?

zpf6vheq  于 2023-02-05  发布在  React
关注(0)|答案(5)|浏览(148)

我有一个TextInput,我不希望每次更改其中的值时都重新呈现它

const [WrittenVal,setWrittenVal] = useState(()=>'');
...
    <TextInput
        value={String(WrittenVal)}
        onChangeText={text => setWrittenVal(text)}
    />

但是我希望能够通过按下按钮来更改输入中的值,这就是我没有使用defaultValue的原因

有什么办法吗?

2q5ifsrm

2q5ifsrm1#

您可以使用useRef保存文本输入中的文本而不呈现,使用useState在按下按钮时显示输入中的文本:
示例:https://snack.expo.dev/TW-fMx1-2

import React from "react";
import { SafeAreaView, StyleSheet, TextInput,TouchableOpacity,Text } from "react-native";

const UselessTextInput = () => {
  const [text, onChangeText] = React.useState("");

  const textRef = React.useRef('')

  const textToRef = (text) =>{
    textRef.current = textRef.current + text
  }

  const showTextInInput = () =>{
    onChangeText( textRef.current )
  }

  console.log("render")
  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={textToRef}
        value={text}
      />
      <TouchableOpacity onPress={showTextInInput}>
          <Text>SHOW TEXT IN INPUT</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    marginTop:50,
    padding: 10,
  },
});

export default UselessTextInput;
wpx232ag

wpx232ag2#

const inputRef = useRef();

<TextInput
   ref={inputRef}
   onChangeText={text => inputRef.text = text }
/>

//function to get input value
const handleSubmit = () => {
    let textInputValue = inputRef.text;
}
gudnpqoy

gudnpqoy3#

你不能阻止类型的重新呈现。但是你的代码可以简化为:

const [value, setValue] = useState('');

<TextInput
    value={value}
    onChangeText={setValue}
/>
nwnhqdif

nwnhqdif4#

无法防止在值更改时重新呈现输入。

但是您可以通过React.memouseMemo钩子来防止其他组件被重新呈现。
按下按钮更改输入值时,您可以这样做:

<Button onPress={() => {
    setWrittenVal(""); //write value you want in ""
}}
xmakbtuz

xmakbtuz5#

如果你有一个嵌套的组件,如下图所示,你需要将状态移动到组件中(在EpicComponent下),setWritenVal将触发EpicComponent上的重新呈现。常见的症状是当你输入时,字段将失去焦点。

const Parent = ()=> {
const [WrittenVal,setWrittenVal] = useState(()=>'');
...
    const EpicComponent = ()=> {
        return (   
            <TextInput
                value={String(WrittenVal)}
                onChangeText={text => setWrittenVal(text)}
            /> )
    }
    return (<EpicComponent/>)
}

相关问题