如何避免重新渲染文本输入？

Question

我有一个

TextInput

，我不希望每次更改其中的值时都重新渲染

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

但是我希望能够通过按下按钮来更改输入内的值，这就是为什么我不只是使用

defaultValue

有什么解决办法吗？？

Answer 1

const inputRef = useRef();

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


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

Answer 2

您可以使用 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;

Answer 3

如果您有如下所示的嵌套组件情况，您需要将状态移动到组件中（在 EpicComponent 下），setWrittenVal 将触发 EpicComponent 上的重新渲染。常见症状是当您键入时该字段会失去焦点。

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

Answer 4

您无法阻止类型的重新渲染。但你的代码可以简化为：

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

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

Answer 5

当值更改时，您无法阻止输入重新渲染。

但是您可以通过

React.memo

或

useMemo

钩子来阻止其他组件重新渲染。

要通过按下按钮更改输入值，您可以这样做：

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

Answer 6

通过这样做，您既可以防止重新渲染，又可以在单击按钮后重置文本输入值。

const ref = useRef("");
const inputRef = useRef(null);

const onChangeText = (item) => {
  ref.current = item;
};

const addComment = async () => {
  ref.current = "";
  inputRef.current?.clear();
  // Perform any other actions or logic you need here
};

 return (
   <View>
     <TextInput ref={inputRef} onChangeText={onChangeText} />
     <TouchableOpacity onPress={addComment}>
         <Text>Send</Text>
     </TouchableOpacity>
   </View>
 );

Answer 7

您只能使用 UseRef 来防止重新渲染。 const keyRef = useRef();

const keyToRef = (text)=>{
    keyRef.text = text
           }

               <TextInput 
                ref={keyRef}
                onChangeText={keyToRef}
                value={keyRef?.text}
               />

Answer 8

我也遇到了类似的问题，不过后来我用

useMemo

钩子解决了。