弄清楚如何通过获取已经在</input><MenuItem/>和<date />"/>
我无法弄清楚如何通过获取已经在</input><MenuItem/>和<date />
我正在开发条目发送应用程序，我已经使用 netbeans(java) 和 mysql 创建了它，但现在我正在使用 reactjs、nodejs 和 mysql 更新它。我是 reactjs 的新手。我在创建它时遇到了很多问题，但我尽力解决了它，正如您在下面的完整代码中看到的那样。这是下面的代码，我一直在向 mysql 服务器发送数据
import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'
import axios from 'axios'
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import Input from '@mui/material/Input';
import Navbar from "./components/navbar"
import Switch from '@mui/material/Switch';
import { Radio, RadioGroup, FormControlLabel} from "@mui/material";
import Button from '@mui/material/Button';
const Sales = () => {
const [sellers,getSellers] = useState([])
useEffect(()=>{
const feactAllBuyers = async ()=>{
try{
const res = await axios.get("http://localhost:9000/sellers")
getSellers(res.data)
}catch(err){
console.log(err)
}
}
feactAllBuyers()
},[])
const [selectedSeller, setSelectedSeller] = useState("");
const handleChange = (event: SelectChangeEvent) => {
setSelectedSeller(event.target.value);
};
const [num1, setNum1] = useState(0);
const [num2, setNum2] = useState(0);
const [result, setResult] = useState(0);
const handleNum1Change = (event) => {
setNum1(parseFloat(event.target.value));
const calculatedResult = parseFloat(event.target.value) * 5 / 100 * num2;
setResult(parseFloat(calculatedResult.toFixed(2)));
};
const handleNum2Change = (event) => {
setNum2(parseFloat(event.target.value));
const calculatedResult = num1 * parseFloat(event.target.value);
setResult(parseFloat(calculatedResult.toFixed(2)));
};
const [num3, setNum3] = useState(0);
const [num4, setNum4] = useState(0);
const [result1, setResult1] = useState(0);
const handleNum3Change = (event) => {
setNum3(parseFloat(event.target.value));
const calculatedResult2 = parseFloat(event.target.value) * 10 / 100 * num4;
setResult1(parseFloat(calculatedResult2.toFixed(2)))
};
const handleNum4Change = (event) => {
setNum4(parseFloat(event.target.value));
const calculatedResult2 = num3 * parseFloat(event.target.value);
setResult1(parseFloat(calculatedResult2.toFixed(2)))
};
const [num5, setNum5] = useState(0);
const [num6, setNum6] = useState(0);
const [result2, setResult2] = useState(0);
const handleNum5Change = (event) => {
setNum5(parseFloat(event.target.value));
const calculatedResult3 = parseFloat(event.target.value) * 25 / 100 * num6;
setResult2(parseFloat(calculatedResult3.toFixed(2)))
};
const handleNum6Change = (event) => {
setNum6(parseFloat(event.target.value));
const calculatedResult3 = num5 * parseFloat(event.target.value);
setResult2(parseFloat(calculatedResult3.toFixed(2)))
};
const [num7, setNum7] = useState(0);
const [num8, setNum8] = useState(0);
const [result3, setResult3] = useState(0);
const handleNum7Change = (event) => {
setNum7(parseFloat(event.target.value));
const calculatedResult4 = parseFloat(event.target.value) * 30 / 100 * num8;
setResult3(parseFloat(calculatedResult4.toFixed(2)))
};
const handleNum8Change = (event) => {
setNum8(parseFloat(event.target.value));
const calculatedResult4 = num7 * parseFloat(event.target.value);
setResult3(parseFloat(calculatedResult4.toFixed(2)))
};
const [num9, setNum9] = useState(0);
const [num10, setNum10] = useState(0);
const [result4, setResult4] = useState(0);
const handleNum9Change = (event) => {
setNum9(parseFloat(event.target.value));
const calculatedResult5 = parseFloat(event.target.value) * 50 / 100 * num10;
setResult4(parseFloat(calculatedResult5.toFixed(2)));
};
const handleNum10Change = (event) => {
setNum10(parseFloat(event.target.value));
const calculatedResult5 = num9 * parseFloat(event.target.value);
setResult4(parseFloat(calculatedResult5.toFixed(2)));
};
const [num11, setNum11] = useState(0);
const [num12, setNum12] = useState(0);
const [result5, setResult5] = useState(0);
const handleNum11Change = (event) => {
setNum11(parseFloat(event.target.value));
const calculatedResult6 = parseFloat(event.target.value) * 1 / 100 * num12;
setResult5(parseFloat(calculatedResult6.toFixed(2)));
};
const handleNum12Change = (event) => {
setNum12(parseFloat(event.target.value));
const calculatedResult6 = num11 * parseFloat(event.target.value);
setResult5(parseFloat(calculatedResult6.toFixed(2)));
};
const [num13, setNum13] = useState(0);
const [num14, setNum14] = useState(0);
const [result6, setResult6] = useState(0);
const handleNum13Change = (event) => {
setNum13(parseFloat(event.target.value));
const calculatedResult7 = parseFloat(event.target.value) * 5 / 100 * num14;
setResult6(parseFloat(calculatedResult7.toFixed(2)));
};
const handleNum14Change = (event) => {
setNum14(parseFloat(event.target.value));
const calculatedResult7 = num13 * parseFloat(event.target.value);
setResult6(parseFloat(calculatedResult7.toFixed(2)));
};
const [num15, setNum15] = useState(0);
const [num16, setNum16] = useState(0);
const [result7, setResult7] = useState(0);
const handleNum15Change = (event) => {
setNum15(parseFloat(event.target.value));
const calculatedResult8 = parseFloat(event.target.value) * 10 / 100 * num16;
setResult7(parseFloat(calculatedResult8.toFixed(2)));
};
const handleNum16Change = (event) => {
setNum16(parseFloat(event.target.value));
const calculatedResult8 = num15 * parseFloat(event.target.value);
setResult7(parseFloat(calculatedResult8.toFixed(2)));
};
const [num17, setNum17] = useState(0);
const [num18, setNum18] = useState(0);
const [result8, setResult8] = useState(0);
const handleNum17Change = (event) => {
setNum17(parseFloat(event.target.value));
const calculatedResult9 = parseFloat(event.target.value) * 40 / 100 * num18;
setResult8(parseFloat(calculatedResult9.toFixed(2)));
};
const handleNum18Change = (event) => {
setNum18(parseFloat(event.target.value));
const calculatedResult9 = num17 * parseFloat(event.target.value);
setResult8(parseFloat(calculatedResult9.toFixed(2)));
};
const finalResult = result + result1+result2+result3+result4+result5+result6+result7+result8;
const [discount, setDiscount] = useState(0);
const handleDiscountChange = (event) => {
setDiscount(parseFloat(event.target.value));
};
const discountedValue = finalResult * (1 - discount / 100);
const formattedDiscount = parseFloat((finalResult * (discount / 100)).toFixed(2));
const formattedDiscountedValue = parseFloat(discountedValue.toFixed(2));
const [includeTax, setIncludeTax] = useState(false);
const [result9, setResult9] = useState(0);
const [result10, setResult10] = useState(0);
const handleIncludeTaxChange = (event) => {
setIncludeTax(event.target.checked);
if (event.target.checked) {
const calculatedResult2 = formattedDiscountedValue * 0.025;
setResult9(parseFloat(calculatedResult2.toFixed(2)));
const calculatedResult3 = formattedDiscountedValue * 0.025;
setResult10(parseFloat(calculatedResult3.toFixed(2)));
} else {
setResult9(0);
setResult10(0);
}
};
const finaltotal = formattedDiscountedValue + result9 +result10
const aq= Math.round(finaltotal)
const [datas,addData]= useState({
});
const handleChange09 = (e) => {
addData((prev)=>({...prev,[e.target.name]:e.target.value}))
}
const handleClick = async e =>{
e.preventDefault()
try{
await axios.post("http://localhost:9000/sales",datas)
}catch(err){
console.log(err)
}
}
console.log(datas)
return (
<div>
<Navbar/>
<div className='box'>
<h3>Date</h3><input type="date" placeholder='date' name="dates"/>
<h3>Party Name</h3>
<FormControl sx={{ m: 1, minWidth: 80 }} >
<InputLabel id="">Select</InputLabel>
<Select
labelId=""
id=""
value={selectedSeller}
label="id"
onChange={handleChange}
>
<MenuItem value="">
<em>Select</em>
</MenuItem>
{sellers.map((seller, index) => (
<MenuItem
key={index}
value={seller.Name}
selected={seller.Name === selectedSeller}
>
{seller.Name}
</MenuItem>
))}
</Select>
</FormControl>
<h3>
Invoice No.
</h3>
<Input placeholder="" />
</div>
<div className='box'>
<h3>Particular</h3> <h3>Quential</h3> <h3>Rate</h3> <h3>Amount</h3>
</div>
<div className='box'>
<h3>5KG</h3>
<Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num1} onChange={handleNum1Change}/>
<Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num2} onChange={handleNum2Change}/>
<Input disabled placeholder="" type="number" step="0.1" min='0'
max='20' value={result.toFixed(2)}/>
</div>
<div className='box'>
<h3>10KG</h3> <Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num3} onChange={handleNum3Change}/>
<Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num4} onChange={handleNum4Change}/>
<Input disabled placeholder="" type="number" step="0.1" min='0'
max='20' value={result1.toFixed(2)} />
</div>
<div className='box'>
<h3>25KG</h3> <Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num5} onChange={handleNum5Change}/>
<Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num6} onChange={handleNum6Change}/>
<Input disabled placeholder="" type="number" step="0.1" min='0'
max='20' value={result2.toFixed(2)} />
</div>
<div className='box'>
<h3>30KG</h3> <Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num7} onChange={handleNum7Change}/>
<Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num8} onChange={handleNum8Change}/>
<Input disabled placeholder="" type="number" step="0.1" min='0'
max='20' value={result3.toFixed(2)} />
</div>
<div className='box'>
<h3>50KG</h3> <Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num9} onChange={handleNum9Change}/>
<Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num10} onChange={handleNum10Change}/>
<Input disabled placeholder="" type="number" step="0.1" min='0'
max='20' value={result4.toFixed(2)} />
</div>
<div className='box'>
<h3>Select 1 KG</h3> <Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num11} onChange={handleNum11Change}/>
<Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num12} onChange={handleNum12Change}/>
<Input disabled placeholder="" type="number" step="0.1" min='0'
max='20' value={result5.toFixed(2)} />
</div>
<div className='box'>
<h3>Select 5 KG</h3> <Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num13} onChange={handleNum13Change}/>
<Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num14} onChange={handleNum14Change}/>
<Input disabled placeholder="" type="number" step="0.1" min='0'
max='20' value={result6.toFixed(2)} />
</div>
<div className='box'>
<h3>Select 10 KG</h3> <Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num15} onChange={handleNum15Change}/>
<Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num16} onChange={handleNum16Change}/>
<Input disabled placeholder="" type="number" step="0.1" min='0'
max='20' value={result7.toFixed(2)} />
</div>
<div className='box'>
<h3>Choker 40 KG</h3> <Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num17} onChange={handleNum17Change}/>
<Input placeholder="" type="number" step="0.1" min='0'
max='20' value={num18} onChange={handleNum18Change}/>
<Input disabled placeholder="" type="number" step="0.1" min='0'
max='20' value={result8.toFixed(2)} />
</div>
<div className='box'><h3>Discount</h3>
<RadioGroup aria-label="discount" name="discount" value={discount} onChange={handleDiscountChange}>
<FormControlLabel
value={0}
control={<Radio />}
label="No Discount"
/>
<FormControlLabel
value={1.5}
control={<Radio />}
label="1.5% Discount"
/>
<FormControlLabel
value={2}
control={<Radio />}
label="2% Discount"
/>
</RadioGroup><Input placeholder="" value={formattedDiscount}/>
</div>
<div className='box'><h3>Total</h3><Input disabled placeholder="" type="number" step="0.1" min='0'
max='20' value={formattedDiscountedValue} />
</div>
<div className='box'><h3>CGST</h3><Switch checked={includeTax} onChange={handleIncludeTaxChange} /><Input placeholder="" value={result9} />
</div>
<div className='box'><h3>SGST</h3><Input placeholder="" value={result10}/>
</div>
<div className='box'><h3>Final</h3><Input placeholder="" value={aq} />
</div>
<Button variant="contained" onClick={handleClick} >Add</Button>
</div>
)
}
export default Sales
这是我卡住的以下代码
const [datas,addData]= useState({
});
const handleClick = async e =>{
e.preventDefault()
try{
await axios.post("http://localhost:9000/sales",datas)
}catch(err){
console.log(err)
}
}
console.log(datas)
我必须听取和
的意见我已经尝试了很多从 和 发送选定的数据，但我不能这样做，因为 onChange= 已经在上面声明了，所以我不能这样做
回答如下：更多推荐
我无法弄清楚如何通过获取已经在</input><MenuItem/>和<date />
发布评论