Javascript 当点击页面的提交按钮时，组件如何知道这一点？

我在electron上使用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={handleFormSubmit}>

在您的特定情况下，由于您正在使用，它将如下所示：

请注意，您的代码中缺少了主表单组件以及onSubmit事件。您缺少一个提交按钮

以下是您的表单的外观：

<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>

你的表格上需要一个提交事件

例如，以下是您的表单：

<Form onSubmit={handleFormSubmit}>

在您的特定情况下，由于您正在使用，它将如下所示：

请注意，您的代码中缺少了主表单组件以及onSubmit事件。您缺少一个提交按钮

以下是您的表单的外观：

<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>

---

@Yanka，这回答了你的问题吗？如果是的话，你介意选择它作为被接受的答案吗？@Yanka，这回答了你的问题吗？如果是，你介意选择它作为接受的答案吗？