在本机反应中存储使用输入文本时遇到问题答案

【问题标题】：Trouble storing use input text in react native在本机反应中存储使用输入文本时遇到问题
【发布时间】：2020-10-19 11:39:19
【问题描述】：

我正在尝试存储用户输入的颜色值和字体大小，但我的程序不存储该值，它会在用户输入文本时立即更改它。我希望它在单击“按我”时更改字体和背景颜色。这是到目前为止的内容：

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,
  },
});

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

【问题讨论】：

暂时保持状态，按下按钮后更新原状态。

标签： javascript css reactjs react-native

【解决方案1】：

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

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>
  );

设置

【讨论】：

【解决方案2】：

我能够用您的代码重现问题，在我的情况下，样式被破坏了，因此您可以尝试通过删除 flex 并添加高度来更改视图，如下所示：

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

【讨论】：