React Native setState 将渲染 JSX 元素

Question

我有两个文本输入和一个按钮

当我点击按钮时，它会改变颜色

喜欢

我的问题是当我点击按钮 (setState)

只有 JSX-Element 会渲染，TextInput 会被清除

（输入）

（点击）

如何使用 JSX-TextInput 并避免这种情况

代码示例 https://snack.expo.dev/@tsaihenry/add958

Answer 1

您可以使用受控输入字段。受控组件将按照您的状态运行。只要您按下按钮，它就会清除输入字段。

const [textValue, setTextValue] = useState("");


  const pressAgree = () => {
    setAgree(!agree);
    setTextValue("");
  }

 <TextInput
        value={textValue}
        style={styles.input}
        placeholder="useless placeholder"
      />

       <Button
        title="Press me"
        onPress={pressAgree}
        color = { (agree) ? "#f194ff" : "#94fff1"}
      />

Answer 2

根据您的代码 TextElement 是 returns 一个 JSX.Element 的函数。因此，将 <TextElement /> 更改为 {TextElement()}，这将呈现函数返回的 JSX 元素。这样输入就不会被清除。

return (
    <View style={styles.container}>

       <TextInput
        style={styles.input}
        placeholder="useless placeholder"
      />

      {TextElement()}
      
      <Button
        title="Press me"
        onPress={pressAgree}
        color = { (agree) ? "#f194ff" : "#94fff1"}
      />

    </View>
  );

React Native setState 将渲染 JSX 元素

React Native setState will render JSX Element

reactjs

react-native

react-hooks