Javascript 在react native中存储使用输入文本时出现问题

我试图存储用户输入的颜色和字体大小的值，但我的程序不存储该值，当用户输入文本时，它会立即更改该值。我希望它改变字体和背景颜色时，按下我是点击。以下是我到目前为止所做的：

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, Button, TouchableOpacity, Alert } from 'react-native';
function Input(props) {
  return (
    <TextInput
      {...props}
      style={{ height: 40, borderWidth: 1, padding: 20, paddingTop: 10, margin: 5 }}
      editable
      maxLength={40}
    />
  );
}
export default function InputMultiline() {
  const [mySize, setMySize] = useState('20');
  const [myBGColor, setMyColor] = useState('yellow');

  const colChange = () => {
    setMyColor(myBGColor);
    setMySize(mySize);
  }

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: myBGColor.toLowerCase(),
        borderBottomColor: '#000000',
        borderBottomWidth: 1,
      }}>
      <Text style={{ fontSize: Number(mySize) }}>Hello</Text>
      <View>
        <Input
          multiline
          numberOfLines={4}
          value={myBGColor}
          onChangeText={colText => setMyColor(colText)}
        /></View>
      <View>
        <Input
          multiline
          numberOfLines={4}
          value={mySize}
          onChangeText={sizeText => setMySize(sizeText)}
        /></View>
      <View style={styles.fixToText}>
        <TouchableOpacity>
          <Button onPress={colChange}
            title="Press Me!"
            color="#841584" />
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginHorizontal: 16,
  },
  title: {
    textAlign: 'center',
    marginVertical: 8,
    fontSize: 20
  },
  fixToText: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  separator: {
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

import React，{useState，useffect}来自“React”；
从“react native”导入{样式表、文本、视图、文本输入、按钮、TouchableOpacity、警报}；
功能输入（道具）{
返回(
);
}
导出默认函数InputMultiline（）{
const[mySize，setMySize]=useState（'20'）；
const[myBGColor，setMyColor]=useState（'yellow'）；
常量colChange=（）=>{
setMyColor（myBGColor）；
设置mySize（mySize）；
}
返回(
你好
setMyColor（colText）}
/>
setMySize（sizeText）}
/>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
marginHorizontal:16，
},
标题：{
textAlign:'中心'，
Margin:8，
尺寸：20
},
固定文本：{
flexDirection:'行'，
justifyContent:'之间的空间'，
},
分离器：{
Margin:8，
borderBottomColor:“#7373”，
borderBottomWidth:StyleSheet.hairlineWidth，
},
});

---

我不知道如何同时更改字体和背景颜色，然后单击“按我”。

您应该再添加两个包含用户输入的状态：

export default function InputMultiline() {
  const [mySize, setMySize] = useState('20');
  const [myBGColor, setMyColor] = useState('yellow');
  const [mySizeUserInput, setMySizeUserInput] = useState('20');  <---- ADDED
  const [myBGColorUserInput, setMyColorUserInput] = useState('yellow'); <----- ADDED


  const colChange = () => {
    setMyColor(myBGColorUserInput);  <----- CHANGED
    setMySize(mySizeUserInput);   <----- CHANGED
  }

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: myBGColor.toLowerCase(),
        borderBottomColor: '#000000',
        borderBottomWidth: 1,
      }}>
      <Text style={{ fontSize: Number(mySize) }}>Hello</Text>
      <View>
        <Input
          multiline
          numberOfLines={4}
          value={myBGColor}
          onChangeText={colText => setMyColorUserInput(colText)}   <----- CHANGED
        /></View>
      <View>
        <Input
          multiline
          numberOfLines={4}
          value={mySize}
          onChangeText={sizeText => setMySizeUserInput(sizeText)}   <----- CHANGED
        /></View>
      <View style={styles.fixToText}>
        <TouchableOpacity>
          <Button onPress={colChange}
            title="Press Me!"
            color="#841584" />
        </TouchableOpacity>
      </View>
    </View>
  );

导出默认函数InputMultiline（）{
const[mySize，setMySize]=useState（'20'）；
const[myBGColor，setMyColor]=useState（'yellow'）；
const[mySizeUserInput，setMySizeUserInput]=useState（'20'）；我可以用你的代码重现这个问题，在我的例子中，样式被破坏了，所以你可以尝试通过删除flex和添加高度来更改视图，如下所示：

<View style={{
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: myBGColor.toLowerCase(),
              height: 100,
            }}>

只需将它们保持在临时状态，按下按钮后更新原始状态即可。