Reactjs 在单键敲击后，输入失去焦点
我正在尝试我的第一个Reactjs构建只使用钩子，我遇到了一个问题，每次我在表体上按下一个输入，我都会失去对输入的关注。我已经读到，这可能是键或实际设置的问题（即，我是否需要拆分我的TablerInputs和TableBody，然后传递道具）？我现在真的需要一些指导，因为我很笨。提前谢谢你，如果你的眼睛受伤了，我很抱歉Reactjs 在单键敲击后，输入失去焦点,reactjs,react-hooks,html-input,Reactjs,React Hooks,Html Input,我正在尝试我的第一个Reactjs构建只使用钩子，我遇到了一个问题，每次我在表体上按下一个输入，我都会失去对输入的关注。我已经读到，这可能是键或实际设置的问题（即，我是否需要拆分我的TablerInputs和TableBody，然后传递道具）？我现在真的需要一些指导，因为我很笨。提前谢谢你，如果你的眼睛受伤了，我很抱歉 /** @module src/components/GeoidCaculator/components/TabularInput */ import React, { use
/** @module src/components/GeoidCaculator/components/TabularInput */
import React, { useState } from 'react';
import {
Col, Row, Table, Button,
} from 'react-bootstrap';
/**
*@description Creates the tabular inputs for lat/lon
* @param ()
* @returns {Object} Returns TabularInputs jsx.
*/
function TabularInputs() {
const defaultDDLoc = [
{
lat: '',
lon: '',
key: 'dd',
},
];
const defaultDMSLoc = [
{
degLat: '',
minLat: '',
secLat: '',
dirLat: '',
degLon: '',
minLon: '',
secLon: '',
dirLon: '',
key: 'dms',
},
];
const defaultDDMLoc = [
{
degLat: '',
decMinLat: '',
dirLat: '',
degLon: '',
decMinLon: '',
dirLon: '',
key: 'ddm',
},
];
const defaultFormats = [
{
DD: 'Decmial Degrees (DD)',
DMS: 'Degrees Minutes Seconds (DMS)',
DDM: 'Degrees Decimal Minutes (DDM)',
},
];
const [ddLoc, setLoc] = useState(defaultDDLoc);
const [dmsLoc, setDMSLoc] = useState(defaultDMSLoc);
const [ddmLoc, setDDMLoc] = useState(defaultDDMLoc);
const [format, setFormat] = useState();
/**
*@description Handle input/state for lat
* @param ()
* @returns {Object} Returns lat.
*/
const handleLocChanges = (event) => {
const storedLoc = [...ddLoc];
storedLoc[event.target.dataset.id][event.target.name] = event.target.value;
setLoc(storedLoc);
console.log(storedLoc);
};
/**
*@description Handle input/state for lat
* @param ()
* @returns {Object} Returns lat.
*/
const handleDMSLocChanges = (event) => {
const storedDMSLoc = [...dmsLoc];
storedDMSLoc[event.target.dataset.id][event.target.name] = event.target.value;
setDMSLoc(storedDMSLoc);
console.log(defaultDMSLoc[0].key);
};
/**
*@description add button feature to add row
*@param(event) onBlur event
*@returns {Object} Returns new row for lat/lon inputs
*/
const validateEntry = (event) => {
const storedLoc = [...ddLoc];
};
/**
*@description add button feature to add row
*@param()
*@returns {Object} Returns new row for lat/lon inputs
*/
const addNewRow = () => {
setLoc((prevLoc) => [...prevLoc, { lat: '', lon: '' }]);
};
/**
/**
* *@description add button feature to add row
*@param()
*@returns {Object} Returns new row for lat/lon inputs
*/
const deleteLastRow = () => {
const currentLoc = [...ddLoc];
currentLoc.pop();
setLoc(currentLoc);
};
/**
*@description add button feature to add row
*@param()
*@returns {Object} Returns new row for lat/lon inputs
*/
const resetState = () => {
setLoc(defaultDDLoc);
};
/**
*@description Creates the tabular inputs for lat/lon
* @param ()
* @returns {Object} Returns TabularInputs jsx.
*/
const TableBody = () => {
setFormat(defaultFormats[0].DMS);
if (format === defaultFormats[0].DMS) {
return (
<tbody id="tableBody" className="col-lg-8 col-lg-offset-2">
{dmsLoc.map((item, index) => (
<tr id="tableRow" key={defaultDMSLoc[0].key}>
<td className="llFormat">
{format}
</td>
<td className="dmsDegreeRow">
<p className="symbols">
<input
className="dmsDegreeInput"
type="string"
onChange={handleDMSLocChanges}
value={item.degLat}
data-id={index}
name="degLat"
/>
°
</p>
</td>
<td className="dmsMinutesRow">
<p className="symbols">
<input
className="dmsMinutesInput"
type="string"
onChange={handleDMSLocChanges}
value={item.minLat}
data-id={index}
name="minLat"
/>
'
</p>
</td>
<td className="dmsSecondsRow">
<p className="symbols">
<input
className="dmsSecondsInput"
type="string"
onChange={handleDMSLocChanges}
value={item.secLat}
data-id={index}
name="secLat"
/>
"
</p>
</td>
<td className="dmsDirRow">
<p className="symbols">
<input
className="dmsDirInput"
type="string"
onChange={handleDMSLocChanges}
value={item.dirLat}
data-id={index}
name="dirLat"
/>
°
</p>
</td>
<td className="dmsDegreeRow">
<p className="symbols">
<input
className="dmsDegreeInput"
type="string"
onChange={handleDMSLocChanges}
value={item.degLon}
data-id={index}
name="degLon"
/>
°
</p>
</td>
<td className="dmsMinutesRow">
<p className="symbols">
<input
className="dmsMinutesInput"
type="string"
onChange={handleDMSLocChanges}
value={item.minLon}
data-id={index}
name="minLon"
/>
'
</p>
</td>
<td className="dmsSecondsRow">
<p className="symbols">
<input
className="dmsSecondsInput"
type="string"
onChange={handleDMSLocChanges}
value={item.secLon}
data-id={index}
name="secLon"
/>
"
</p>
</td>
<td className="dmsDirRow">
<p className="symbols">
<input
className="dmsDirInput"
type="string"
onChange={handleDMSLocChanges}
value={item.dirLon}
data-id={index}
name="dirLon"
/>
°
</p>
</td>
</tr>
))}
</tbody>
);
}
return (
<tbody className="tableBody">
{ddLoc.map((item, index) => (
<tr key={defaultDDLoc[0].key}>
<td className="llFormat">
{format}
</td>
<td className>
<p className="symbolss">
<input
className="llInputs"
type="string"
onChange={handleLocChanges}
value={item.lat}
data-id={index}
name="lat"
/>
°
</p>
</td>
<td>
<p className="symbolss">
<input
className="llInputs"
type="degree"
value={item.lon}
onChange={handleLocChanges}
data-id={index}
name="lon"
/>
°
</p>
</td>
</tr>
))}
</tbody>
);
};
return (
<Col>
<Row>
<Table id="tabularInputs">
<thead id="tableHeader" className="col-lg-8">
<tr>
<th>Select Format</th>
<th>Latitude</th>
<th>Longitude</th>
</tr>
</thead>
<TableBody />
</Table>
</Row>
<Row className="justify-content-md-center">
<Button variant="dark" onClick={addNewRow}>Add Row</Button>
<Button variant="dark" onClick={deleteLastRow}>Delete Row</Button>
<Button variant="dark" onClick={resetState}>Reset</Button>
</Row>
</Col>
);
}
export default TabularInputs;
/**@模块src/components/GeoidCaculator/components/tablerInput*/
从“React”导入React，{useState}；
进口{
列、行、表、按钮、，
}来自“反应引导”；
/**
*@说明为lat/lon创建表格输入
*@param（）
*@returns{Object}返回jsx。
*/
函数TabularInputs（）{
常量defaultDDLoc=[
{
拉丁语：''，
朗：“，
键：“dd”，
},
];
常量defaultDMSLoc=[
{
德格拉特：''，
minLat:“，
secLat:“，
迪拉特：''，
德格隆：“，
明伦：“，
塞克伦：“，
迪伦：“，
键：“dms”，
},
];
常量defaultDDMLoc=[
{
德格拉特：''，
Decminat:“”，
迪拉特：''，
德格隆：“，
德克明伦：“，
迪伦：“，
关键字：“ddm”，
},
];
常量默认格式=[
{
DD:“十进位度数（DD）”，
DMS:“度分秒（DMS）”，
DDM:“度十进制分钟（DDM）”，
},
];
const[ddLoc，setLoc]=useState（defaultDDLoc）；
const[dmsLoc，setDMSLoc]=useState（defaultDMSLoc）；
const[ddmLoc，setDDMLoc]=useState（defaultDDMLoc）；
const[format，setFormat]=useState（）；
/**
*@说明lat的句柄输入/状态
*@param（）
*@returns{Object}返回lat。
*/
const handleLocChanges=（事件）=>{
常数storedLoc=[…ddLoc]；
storedLoc[event.target.dataset.id][event.target.name]=event.target.value；
setLoc（storedLoc）；
控制台日志（storedLoc）；
};
/**
*@说明lat的句柄输入/状态
*@param（）
*@returns{Object}返回lat。
*/
const handleDMSLocChanges=（事件）=>{
const storedDMSLoc=[…dmsLoc]；
storedDMSLoc[event.target.dataset.id][event.target.name]=event.target.value；
setDMSLoc（storedDMSLoc）；
console.log（defaultDMSLoc[0].key）；
};
/**
*@说明添加按钮功能以添加行
*@参数（事件）onBlur事件
*@返回{Object}返回lat/lon输入的新行
*/
const validateEntry=（事件）=>{
常数storedLoc=[…ddLoc]；
};
/**
*@说明添加按钮功能以添加行
*@param（）
*@返回{Object}返回lat/lon输入的新行
*/
const addNewRow=（）=>{
setLoc（（prevLoc）=>[…prevLoc，{lat:''，lon:''}]）；
};
/**
/**
**@description添加按钮功能以添加行
*@param（）
*@返回{Object}返回lat/lon输入的新行
*/
常量deleteLastRow=（）=>{
const currentLoc=[…ddLoc]；
currentLoc.pop（）；
setLoc（当前LOC）；
};
/**
*@说明添加按钮功能以添加行
*@param（）
*@返回{Object}返回lat/lon输入的新行
*/
常量重置状态=（）=>{
setLoc（defaultDDLoc）；
};
/**
*@说明为lat/lon创建表格输入
*@param（）
*@returns{Object}返回jsx。
*/
const TableBody=（）=>{
setFormat（defaultFormats[0].DMS）；
if（format==defaultFormats[0].DMS）{
返回(
{dmsLoc.map（（项目，索引）=>(
{格式}
&度；
&载脂蛋白；
"
&度；
&度；
&载脂蛋白；
"
&度；
))}
);
}
返回(
{ddLoc.map（（项目，索引）=>(