JSX本机setState将呈现JSX元素

Question

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

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

喜欢

​

​

我的问题是什么时候我点击按钮(setState)

只有JSX元素将呈现，TextInput将被清除。

(输入)

​

​

(点击)

​

​

如何使用并避免这种情况

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

Answer 1

按照您的代码，TextElement是一个返回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>
  );

Answer 2

您可以使用受控输入字段。受控组件将按照您的状态运行。无论何时按下按钮，它都会清除输入字段。

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"}
      />