javascript - React 表单不会呈现我放在构造函数上的状态值

问题描述

我有一个带有 2 个选项卡的选项卡组件。第一个选项卡包含员工列表和一个按钮，用于在第二个选项卡（联系表单）中转移您，其中包含所选员工的数据。在第一个选项卡中，我创建了一个员工对象，将其发送到第二个选项卡中，在第二个选项卡中，我使用对象值设置 state.name、state.surname。

问题是，为了以表单加载数据，我需要在第一个选项卡中改回并再次转到第二个选项卡。

选项卡组件

import React from 'react';

function TabPanel(props) {
  const { children, value, index, ...other } = props;
  
  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired,
};


function a11yProps(index) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}
var importErg = new Boolean(false);
export function getImport(){
  return importErg;
}
export const globalErg = {
  onoma: "",
  epitheto: ""
}

export function getGlobalErg(){
  return globalErg;
}

async function getErgByeID(ErgEid){
   globalErg.onoma = ""
   globalErg.epitheto = ""
  await fetch(URL+"/ergazomenoi?eid=eq."+ErgEid)
  .then(response => {if(response.ok){
    return response.json()
    }
    else {
    alert('Something went wrong')
    throw new Error('Something went wrong');
    }
})
  .then(data => {
                globalErg.onoma = data[0].onoma
                globalErg.epitheto = data[0].epitheto
        }
  )  
}

export default function SimpleTabs() {

  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  function more(ergID){
        setValue(1);
        getErgByeID(ergID);
  }
}
  return (
    <div className="main">
      <AppBar position="static" id = "topbar">
        <Tabs value={value} onChange={handleChange}>
          <Tab label="Employees" {...a11yProps(0)}/>
          <Tab label="Contact" {...a11yProps(1)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
                <Table />
                  <Button style={{color: "#fff", background: "#111", marginRight: "2.5px", marginLeft:"2.5px", marginTop:"5px"}} onClick={() => more()}>
                  Contact
                  </Button>
      </TabPanel>
      <TabPanel value={value} index={1} id = 'tab'>
         <Contact/>
      </TabPanel>
    </div>
  );
}

表单组件

import React, { Component, useEffect } from "react";
import {getGlobalErg} from "./Proswpiko-tabs";

class Personal_info extends Component {
constructor(props){
    super(props);

    let erg = getGlobalErg();
    this.state = {
        onoma: erg.onoma,
        epitheto: erg.epitheto,
    };
}
    onomaChangeHandler = (event) => {
        this.setState({onoma: event.target.value});
    }
    epithetoChangeHandler = (event) => {
        this.setState({epitheto: event.target.value});
    }
    
render() {

return (
<form onSubmit = {this.SubmitHandler}>
    <div >
        <p id = "topText" align = "center">
            <h2>Contact info</h2>
        </p>
    <img id="top" src="top.png" alt=""></img>
    <div id="form_container">
        <form id="form" class="appnitro"  method="post" action="">
        <div class="form_description">
                    <h2>Personal info</h2>
                </div>
        <ul>
            <li id = "li_3">
            <label class="description" for="element_3" >Όνομα </label>
            <span>
                    <input type ="text" id="nameInput" name= "nameInput" class="element text" maxLength="255" size="15"  onChange={this.onomaChangeHandler} value = {this.state.onoma} required/>
                    <label>Name</label>
                </span>
            <span>
            <input type ="text" id="surNameInput" name= "surNameInput" class="element text" maxLength="255" size="14" onChange={this.epithetoChangeHandler} value = {this.state.epitheto} required/>
            <label>Surname</label>
            </span>
            </li>
        
        </ul>
        </form> 
        <div id="footer">
        </div>
    </div>
    <img id="bottom" src="bottom.png" alt=""></img>
</div>
</form>
);}} 
export default Personal_info;

标签： javascriptreactjs

javascript - React 表单不会呈现我放在构造函数上的状态值

问题描述

解决方案

推荐阅读