反应来自输入 onChange 的结果

Question

在我的页面上，我想创建一个简单的函数，它会给出以下结果（result = venteTotal-VentePaiement-VenteAnnulation / solde = vente.vt-vente.pt-vente.at）

我想显示的地方：

<form className='form form-journal' onSubmit={onSubmitDay}>
                          <div className='input-grp'>
                          <label>Date</label>
                          <input 
                              type="date" 
                              name="date" 
                              id="date" 
                              value={dateCourrante.toString()}
                              onChange={onSetDate} />
                          </div>
                          <div className='input-grp'>
                              <label>coupeur</label>
                              <Select name='coupeur' className='select-coupeur' id='coupeur' styles={selectStyle} options={coupeurs} />
                          </div>
                          <div className='input-grp'>
                          <label>Vente totale</label>
                          <input type="number" name="vt" id="vt" placeholder='200000' onChange={handleSolde} /><span>Fcfa</span>
                          </div>
                          <div className='input-grp'>
                          <label>Annulation totale</label>
                          <input type="number" name="at" id="at" placeholder='0' onChange={handleSolde} /><span>Fcfa</span>
                          </div>
                          <div className='input-grp'>
                          <label>Paiement totale</label>
                          <input type="number" name="pt" id="pt" placeholder='350000' onChange={handleSolde} /><span>Fcfa</span>
                          </div>
                          <p className='solde'>[where i take the result]Solde : <span>{solde}</span> Fcfa</p>
                          <button type="submit">Enregistrer</button>
                        </form>

handleSolde 函数：

const handleSolde = e => {
    const { name, value } = e.target;
    setVente(prevState => ({
      ...vente,
      [name]: value,
    }));
    setSolde(vente.vt-(vente.at+vente.pt));
    console.log(name, value);
  };

使用这段代码，solde 的结果在用户输入时有一个奇怪的反应，看起来他接受了最后一次输入的结果（没有最后一个键）...... 有人看到问题了吗？

Answer 1

尝试在 useEffect 挂钩中执行 setSolde(vente.vt-(vente.at+vente.pt));，每次 setVente 更改时都会触发该挂钩。

将 vente 添加到 useEffect

的依赖项数组

Answer 2

完成任务的最终代码，我愿意改进：

import React, {useEffect, useState} from 'react'
export default function Test() {

  
  const [solde, setSolde] = useState(0);
  const [vente, setVente] = useState(0);
  const [paiement, setPaiement] = useState(0);
  const [annulation, setAnnulation] = useState(0);
  const handleChange = (e) => {
    switch (e.target.name) {
      case 'vente':
        setVente(e.target.value)
        break;
      case 'paiement':
        setPaiement(e.target.value)
        break;
      case 'annulation':
        setAnnulation(e.target.value)
        break;
      default:
        break;
    }
  }
  useEffect(() => {
    setSolde(vente-paiement-annulation);
  }, [vente, paiement, annulation])
  return (
    <>
        <div>Test</div>
        {/* Tester les composants à probleme ici pour les isoler et les corriger */}
        <input type="text" name='vente' onChange={handleChange}/>
        <input type="text" name='paiement' onChange={handleChange}/>
        <input type="text" name='annulation' onChange={handleChange}/>
        {solde}
    </>
  )
}

反应来自输入 onChange 的结果

React result from input onChange

reactjs

input

use-state