ReactNative：文本輸入onChangeText不會觸發我的功能

我目前有一個 TextInput，用戶應該在其中輸入一個數字，當用戶輸入一個值時，我想根據輸入的值進行即時計算。我創建了一個函式，并在這個函式中進行了計算。我嘗試在 TextInput 中的文本更改但未觸發時運行該函式。

function EnterAmountScreen() {

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

  const handleAmount=async({
    amount1,amount2}) => {
        Setam1(amount1);
        Setam2(amount2);
    
    console.log("Total amount: "  am1  "." am2);
};

const handleCalculation =()=>{

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

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

       }

return(
    <AppForm
    initialValues={{ 
        amount1:"",
        amount2:"",
    }}
    onSubmit={handleAmount}
  >
      <View> 
      <View>
      <TextInput
      name="amount1"
      length={4}
      autoCorrect={false}
      autoFocus
      keyboardType="ascii-capable"
      placeholder="0000"
      keyboardType="numeric"
      selectTextOnFocus = {false}
      />
       <Text>.</Text>
      <TextInput
        name="amount2"
        autoCorrect={false}
        placeholder="00"
        keyboardType="numeric"
        **onChangeText={handleCalculation}**
      />
      </View>
    </View>
  </AppForm>

我正在更新下面的代碼，試圖在每次 am1 更改時使用 useEffect 進行渲染。

function EnterAmountScreen() {

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

  const handleAmount=async({
    amount1,amount2}) => {
        Setam1(amount1);
        Setam2(amount2);
    
    console.log("Total amount: "  am1  "." am2);
};

const handleCalculation =()=>{

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

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

useEffect(() => {
      Setam1(am1);
      console.log('am1',am1)
   }, [am1])

return(
    <AppForm
    initialValues={{ 
        amount1:"",
        amount2:"",
    }}
    onSubmit={handleAmount}
  >
      <View> 
      <View>
      <TextInput
      name="amount1"
      length={4}
      autoCorrect={false}
      autoFocus
      keyboardType="ascii-capable"
      placeholder="0000"
      keyboardType="numeric"
      selectTextOnFocus = {false}
      />
       <Text>.</Text>
      <TextInput
        name="amount2"
        autoCorrect={false}
        placeholder="00"
        keyboardType="numeric"
        **onChangeText={(text)=>Setam1({am1:text})}**
      />
      </View>
    </View>
  </AppForm>

uj5u.com熱心網友回復：

嘗試以適當的格式呼叫它：

<TextInput
        name="amount2"
        autoCorrect={false}
        placeholder="00"
        keyboardType="numeric"
        onChangeText={const add = (num1, num2) => {
                       return num1   num2;};
                       let resuladd = add(Number(am1), Number(am2));
                       console.log(" :",resuladd);}
      />

uj5u.com熱心網友回復：

它實際上觸發了該功能。問題是狀態（am1 和 am2）不是最新的，無法執行計算并提供準確的答案。

下面的代碼以您在說明中指定的方式運行。看一看！

function EnterAmountScreen() {   
    const [am1, Setam1] = React.useState(0);
      const [am2, Setam2] = React.useState(0);
      const [sum, setSum] = React.useState(0);
    
      const handleCalculation = value => {
        const add = (num1, num2) => {
          return num1   num2;
        };
        Setam2(value);
        let resuladd = add(Number(am1), Number(value));
        setSum(resuladd);
        console.log(' :', resuladd);
      };
    
    return (
    <View>      
     <TextInput
            name="amount1"
            length={4}
            autoCorrect={false}
            autoFocus
            keyboardType="ascii-capable"
            placeholder="0000"
            keyboardType="numeric"
            selectTextOnFocus={false}
            onChangeText={value => Setam1(value)}
          />
          <TextInput
            name="amount2"
            autoCorrect={false}
            placeholder="00"
            keyboardType="numeric"
            onChangeText={handleCalculation}
          />
          <Text>Total sum is</Text>
          <Text>{sum}</Text>
    <View> 
    )}

標籤：

上一篇：FirebaseStorage：要使用ref(service,url)，第一個引數必須是Storage實體

下一篇：AsyncStorage找不到變數