[英]How does component know that when page's submit button is clicked?
我在電子上使用 reactjs 並且在單擊頁面按鈕時無法通知組件。 組件上的數據將傳遞到頁面。 也許電子導致我的程序出現問題,或者我的代碼有問題?
這是我的頁面:
import React, { useContext, useState, useEffect } from 'react';
import { Form, Button, Popconfirm, Icon, Input, Radio, Collapse, Checkbox } from 'antd';
import Axios from 'axios';
import CompanyContext from '../util/UserContext';
import renderEmpty from 'antd/lib/config-provider/renderEmpty';
import InputOnly from '../components/InputOnly';
export default function Hitung() {
let [loading, setLoading] = useState(false);
let [form, setForm] = useState([]);
let [soal, setSoal] = useState([]);
let [pilihan, setPilihan] = useState([]);
let [test, setTest] = useState([1, 2, 3, 4, 5]);
let [answer, setAnswer] = useState("");
let [coba, setCoba] = useState([]);
let [coba2, setCoba2] = useState([]);
const company = useContext(CompanyContext);
let answertemp = []
useEffect(() => {
async function getData() {
try {
let data = await Axios.get('http://localhost:5000/lelang/getquestion');
setSoal(data.data.pertanyaan);
}
catch (e) {
console.log(e);
}
}
getData();
}, []);
function onAnswer(data) {
answertemp.push(data);
console.log(answertemp);
}
function RenderQuestion() {
if (soal.length != 0) {
return soal.map(data => {
switch (data.type_question) {
case "input_only":
return (<InputOnly data={data} onAnswer={answer => {
if(coba.length!=0){
for(let i =0;i<coba.length;i++){
if (coba[i].id_question===answer.id_question){
coba[i].answer=answer.answer;
break;
}
else if (i<coba.length-1){
continue;
}
else{
setCoba([...coba,answer])
}
}
}
else{
console.log('add');
setCoba([...coba,answer])
}
}} />)
})
}
else {
return (<h2 style={{ textAlign: "center" }}>Loading....</h2>)
}
}
//insert_answer
async function submit(e) {
setAnswer(answertemp)
setLoading(true);
e.preventDefault();
try {
const token = await Axios.post('http://localhost:5000/lelang/insert_answer', company.data);
}
catch (e) {
alert("error " + e)
}
setLoading(false);
}
return (
<div>
<h1 style={{ textAlign: 'center' }}>Input Penilaian {company.data}</h1>
<div style={{ padding: '30px' }}>
<Form>
{RenderQuestion()}
<button onClick={() => console.log(coba)}>Simpan</button>
</Form>
</div>
</div>
);
}
這是我的組件
import React, { useContext, useState, useEffect } from 'react';
import { Input, Form } from 'antd';
export default function InputOnly (props){
let[inputOnly,setInputOnly]=useState({});
let [temp,setTemp]=useState('');
let [answer,setAnswer]=useState({});
useEffect(()=>{
setInputOnly(props.data);
},[]);
return (
<div>
<p style={{fontWeight:"bold"}}>{inputOnly.question}</p>
<Form.Item required>
<Input style={{ width: '20%' }}
id = {inputOnly.id_question}
value={temp}
onChange={data => {
setTemp(data.target.value);
let answer = {
id_question:data.target.id,
answer:data.target.value
}
props.onAnswer(answer);
// setAnswer(answer);
}}
>
</Input>
<br/>
</Form.Item>
</div>
)
}
您的Form
上需要一個onSubmit
事件,
例如這里是你的表格:
<Form onSubmit={handleFormSubmit}>
然后你的handleFormSubmit
函數:
const handleFormSubmit = (e) => {
e.preventDefault();
console.log('form submitted!');
// do someting with your form here...
}
在您的特定情況下,由於您使用的是Ant Design form ,它看起來像這樣:
(請注意您的代碼中如何缺少主要Form
組件以及onSubmit
事件。並且您缺少一個 submit Button
。)
您的表單應如下所示:
<Form onSubmit={handleFormSubmit}>
<Form.Item required>
<Input style={{ width: '20%' }}
id = {inputOnly.id_question}
value={temp}
onChange={data => {
setTemp(data.target.value);
let answer = {
id_question:data.target.id,
answer:data.target.value
}
props.onAnswer(answer);
// setAnswer(answer);
}}
>
</Input>
<br/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.