ReactNativeOnChange被觸發但不更新狀態

當用戶輸入 2 個數字時，我試圖實作這一點(eg. am1=5555 and am2=55)。

除法函式am2/100 (55/100 = 0.55) 的結果做加法函式(am1 0.55=5555.55) 的結果乘法函式的結果做((5555.55*5%) 5555.55 100)“TOTAL”

我在這里嘗試的是當用戶更改 am1 或 am2 的值時，TOTAL 會自動更改。

我嘗試使用 onChange 執行以下操作并更新狀態，但是使用下面的代碼不起作用。

AmountScreen.js

    import React,{useState} from 'react';
    import {View, StyleSheet,Text,TextInput,TouchableOpacity,ScrollView,Alert} from 
    'react-native';

      import {AppForm} from "../../components/forms";

      function EnterAmountScreen() {

      const[am1,Setam1]=useState(0)
      const[am2,Setam2]=useState(0)

      const divide = (num1, num2) => {
        return num1 / num2;
      };

      let resuldivide = divide(am2, 100);
      console.log("/:",resuldivide);

      const add = (num1, num2) => {
        return num1   num2;
      };

      let resuladd = add(Number(am1), Number(resuldivide));
      console.log(" :",resuladd);

      const multiply = (num1, num2) => {
        return num1 * num2;
      };

      let resulmultiply = multiply(Number(resuladd), 0.05);
      console.log("%:",parseFloat(resulmultiply).toFixed(2));

      const total=(num1,num2,num3)=>{
        return num1   num2   num3;
      };

       let resultotal = 
       total(Number(resuladd),Number(parseFloat(resulmultiply).toFixed(2)),Number(100));
       console.log("=:",parseFloat(resultotal).toFixed(2));    
       
       console.log("am1:",am1)
    
     const changeam1State = ({am1,am2}) => {
        Setam1(am1);
        console.log('new am1',am1)
     }

    return(
       <View>
        <AppForm
        initialValues={{ 
            amount1:am1,
            amount2:am2,
        }}>
          <View> 
          <View>
          <TextInput
          name="amount1"
          autoCorrect={false}
          autoFocus
          contextMenuHidden={true}
          keyboardType="ascii-capable"
          keyboardType="numeric"
          onChange={changeam1State}
          value={am1}
          />
           <Text>.</Text>
          <TextInput
            name="amount2"
            autoCorrect={false}
            placeholder="00"
            keyboardType="numeric"
            contextMenuHidden={true}
          />
          </View>

              <Text>{parseFloat(resultotal).toFixed(2)}</Text>

              <Text>am1: {am1} </Text>
              <Text>am2: {am2} </Text>
        
        </View>
      </AppForm>

       </View>
    );
    }

    export default EnterAmountScreen;

AppForm.js

    import React from "react";
    import { Formik } from "formik";

    function AppForm({ initialValues, onSubmit, validationSchema, children }) {
    return (
    <Formik
      initialValues={initialValues}
      onSubmit={onSubmit}
      validationSchema={validationSchema}
    >
      {() => <>{children}</>}
    </Formik>
    );
    }

    export default AppForm;

uj5u.com熱心網友回復：

你沒有formik正確集成你可以參考這個官方檔案

您不需要使用狀態來保持表單值formik會為您做到這一點。

您將收到{ handleChange, handleBlur, handleSubmit, values }來自<Formik>Component 的道具，您必須使用它。對于您的用例，您也可以不用formik。

這是formik 與您的組件集成的示例代碼

AmountScreen.js

import React, { useState } from "react";
import { View, Text, TextInput } from "react-native";

import AppForm from "./AppForm";

function EnterAmountScreen() {
  const Form = ({ handleChange, handleSubmit, values }) => {
    const { amount1, amount2 } = values;
    const divide = (num1, num2) => {
      return num1 / num2;
    };

    let resuldivide = divide(amount2, 100);
    console.log("/:", resuldivide);

    const add = (num1, num2) => {
      return num1   num2;
    };

    let resuladd = add(Number(amount1), Number(resuldivide));
    console.log(" :", resuladd);

    const multiply = (num1, num2) => {
      return num1 * num2;
    };

    let resulmultiply = multiply(Number(resuladd), 0.05);
    console.log("%:", parseFloat(resulmultiply).toFixed(2));

    const total = (num1, num2, num3) => {
      return num1   num2   num3;
    };

    let resultotal = total(
      Number(resuladd),
      Number(parseFloat(resulmultiply).toFixed(2)),
      Number(100)
    );
    console.log("=:", parseFloat(resultotal).toFixed(2));

    return (
      <View>
        <View>
          <TextInput
            name="amount1"
            autoCorrect={false}
            autoFocus
            contextMenuHidden={true}
            keyboardType="ascii-capable"
            keyboardType="numeric"
            onChange={handleChange("amount1")}
            value={values?.amount1}
          />
          <Text>.</Text>
          <TextInput
            name="amount2"
            autoCorrect={false}
            placeholder="00"
            keyboardType="numeric"
            contextMenuHidden={true}
            value={values?.amount2}
            onChange={handleChange("amount2")}
          />
        </View>

        <Text>{parseFloat(resultotal).toFixed(2)}</Text>

        <Text>
          {"am1:"} {values.amount1}{" "}
        </Text>
        <Text>
          {"am2:"} {values.amount2}{" "}
        </Text>
      </View>
    );
  };

  return (
    <View>
      <AppForm
        initialValues={{
          amount1: 0,
          amount2: 0
        }}
        Component={Form}
      ></AppForm>
    </View>
  );
}

export default EnterAmountScreen;

AppForm.js

import React from "react";
import { Formik } from "formik";

function AppForm({ initialValues, onSubmit, validationSchema, Component }) {
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={onSubmit}
      validationSchema={validationSchema}
    >
      {({ handleChange, handleBlur, handleSubmit, values }) => (
        <Component
          handleChange={handleChange}
          handleSubmit={handleSubmit}
          values={values}
        />
      )}
    </Formik>
  );
}

export default AppForm;

代碼和盒子演示代碼：https ://codesandbox.io/s/crazy-sound-04jvx?file =/ src/AppForm.js:0-523

標籤：

上一篇：導航到不同堆疊中的螢屏時，UI不會更新

下一篇：將物件合并到陣列中