React Native用户输入值存储异常：需点击按钮生效样式变更

我明白你的问题啦——现在输入框里一输入颜色或字号，页面的背景色和文字大小立刻就变了，但你想要的是点击「Press Me!」按钮之后才应用这些修改对吧？这是因为你当前把输入绑定的状态直接用来控制UI样式了，状态一更新UI就会跟着刷新。咱们可以通过拆分状态来解决这个问题：

核心思路 #

用两组状态变量：

• 一组保存用户输入的临时值（只在输入框里展示，不直接影响UI）
• 另一组保存实际生效的样式值（只有点击按钮时才从临时值同步过来）

修改后的完整代码 #

import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button, TouchableOpacity } 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 [activeSize, setActiveSize] = useState('20');
  const [activeBGColor, setActiveBGColor] = useState('yellow');
  
  // 保存用户输入的临时值
  const [tempSize, setTempSize] = useState('20');
  const [tempBGColor, setTempBGColor] = useState('yellow');

  // 点击按钮时同步临时值到生效状态
  const applyChanges = () => {
    setActiveBGColor(tempBGColor);
    setActiveSize(tempSize);
  };

  return (
    <View 
      style={{ 
        flex: 1, 
        alignItems: 'center', 
        justifyContent: 'center', 
        backgroundColor: activeBGColor.toLowerCase(), 
        borderBottomColor: '#000000', 
        borderBottomWidth: 1, 
      }}
    >
      {/* 这里使用生效状态来控制样式 */}
      <Text style={{ fontSize: Number(activeSize) }}>Hello</Text>
      
      {/* 输入框绑定临时状态，输入时只修改临时值 */}
      <View>
        <Input 
          multiline 
          numberOfLines={4} 
          value={tempBGColor} 
          onChangeText={colText => setTempBGColor(colText)} 
        />
      </View>
      <View>
        <Input 
          multiline 
          numberOfLines={4} 
          value={tempSize} 
          onChangeText={sizeText => setTempSize(sizeText)} 
        />
      </View>
      
      <View style={styles.fixToText}>
        <TouchableOpacity>
          <Button onPress={applyChanges} 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,
  },
});

关键修改点说明 #

• 新增了tempBGColor和tempSize两个状态，专门用来接收用户的输入内容，输入时只会更新这两个临时状态，不会触发UI样式变化。
• 原来的myBGColor和mySize改名为activeBGColor和activeSize，作为实际控制UI的状态，只有点击按钮时才会被更新。
• colChange函数改名为applyChanges，功能变成把临时值同步到生效状态里，这样点击按钮后UI才会刷新样式。

这样修改后，用户可以自由输入颜色和字号，只有点击「Press Me!」按钮时，页面的背景色和文字大小才会一起更新，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Isha