मैं एक प्रकार का व्यय प्रबंधक बनाने की कोशिश कर रहा हूं और मुझे एक समस्या आ रही है जहां मेरे द्वारा सबमिट की गई संख्या एक स्ट्रिंग के रूप में जोड़ दी जाती है, न कि एक इंट के रूप में। मैंने सुनिश्चित किया है कि डिफ़ॉल्ट एक पूर्णांक के रूप में सेट है, न कि एक स्ट्रिंग के रूप में।

"समस्याग्रस्त" घटक आय घटक है (जिसे मैंने हाइलाइट किया है)

अनुप्रयोग:

import Outcome from "./components/Outcome";
import Income from "./components/Income";

const App = () => {
  const [sum, setSum] = useState(0);

  const onChangeHandlerOutcome = (value) => {
    setSum(sum - value);
  };

  const onChangeHandlerIncome = (value) => {
    setSum(sum + value);
  };

  return (
    <div>
      <Outcome onChangeHandlerOutcome={onChangeHandlerOutcome} />
      <Income onChangeHandlerIncome={onChangeHandlerIncome} />
      You have {sum}$!
    </div>
  );
};

export default App;

आय घटक


const Income = (props) => {
  const [input, setInput] = useState(0);

  const setInputHandler = (e) => {
    e.preventDefault();
    setInput(e.target.value);
    props.onChangeHandlerIncome(input);
  };

  return (
    <div>
      <form onSubmit={setInputHandler}>
        <label>
          Income
          <input
            type="text"
            name="name"
            onChange={(e) => setInput(e.target.value)}
          ></input>
        </label>
        <input type="submit" value="Submit"></input>
      </form>
    </div>
  );
};

export default Income;

परिणाम घटक:


const Outcome = (props) => {
  const [input, setInput] = useState(0);

  const setInputHandler = (e) => {
    e.preventDefault();
    setInput(e.target.value);
    props.onChangeHandlerOutcome(input);
  };

  return (
    <div>
      <form onSubmit={setInputHandler}>
        <label>
          Outcome
          <input
            type="text"
            name="name"
            onChange={(e) => setInput(e.target.value)}
          ></input>
        </label>
        <input type="submit" value="Submit"></input>
      </form>
    </div>
  );
};

export default Outcome;
1
NewbieAeg 9 सितंबर 2020, 20:57

1 उत्तर

सबसे बढ़िया उत्तर

onChange={(e) => setInput(e.target.value)} में e.target.value का मान हमेशा एक स्ट्रिंग होगा। आप एक पूर्णांक में बदलने के लिए parseInt(e.target.value) का उपयोग कर सकते हैं। या फ़्लोट के लिए parseFloat का उपयोग करें।

यह अंतरराष्ट्रीय संख्या (फिर एक अलग दशमलव विभाजक का उपयोग करके ".") को संभाल नहीं पाएगा, इसलिए सावधान रहें कि आपको parseInt की तुलना में स्ट्रिंग से संख्या में अपने रूपांतरण में अधिक जादू की आवश्यकता हो सकती है।

0
pintxo 9 सितंबर 2020, 21:02