时间戳

首页 > 解决方案 > React-Native textInput 添加数字而不是添加数字

react-native - React-Native textInput 添加数字而不是添加数字

问题描述

我有两个输入字段，它们接受我添加并显示的数字。问题是当我输入 40 时，我的总字段必须显示 40。但它显示 4+40 = 44 。在下一个输入字段中，如果我添加 30，则将其视为 3 + 30，并且我的总字段显示为 44 +33 = 77 而不是 70

这是我的实现。我知道这是一件简单的事情，但在问这个问题之前我经历了很多论坛。


    const [ival, setIval] = useState(0);  // state to hold sum
      const handleInput = val => {      // handles input
        let tmp = parseInt(val) + parseInt(ival);  // adds curr state and input
        setIval(tmp);
      };
    <TextInput
              style={[{height: 40, borderWidth: 1}]}
              value={ival}
              onChangeText={text => handleInput(text)}
            />
            <TextInput
              style={[{height: 40, borderWidth: 1}]}
              value={ival}
              onChange={text => handleInput(text)}
            />
            <Text>{ival}</Text>     // displayes sum

标签： react-nativesumtextinput

解决方案

您正在做的是 - 每次在文本输入中输入一个值时都会考虑一个新数字

这应该工作 -

 const [ival, setIval] = useState(0);  // state to hold sum
const [input1, setInput1] = useState('');
const [input2, setInput2] = useState('');

      const handleInput1 = val => {      // handles input
       setInput1(val) 
        setIval(ival+parseInt(val));
      };

 const handleInput2 = val => {      // handles input
       setInput2(val) 
        setIval(ival+parseInt(val));
      };
    <TextInput
              style={[{height: 40, borderWidth: 1}]}
              value={input1}
              onChangeText={text => handleInput1(text)}
            />
            <TextInput
              style={[{height: 40, borderWidth: 1}]}
              value={input2}
              onChange={text => handleInput2(text)}
            />
            <Text>{ival}</Text>     // displayes sum

推荐阅读