Javascript 由于React引导验证，settimeout不工作
我正在尝试在React引导中设置表单验证。Javascript 由于React引导验证，settimeout不工作,javascript,reactjs,validation,axios,react-bootstrap,Javascript,Reactjs,Validation,Axios,React Bootstrap,我正在尝试在React引导中设置表单验证。 我刚刚根据React引导文档编写了代码。 当我按下提交按钮时，我确认验证已激活，数据已更改。 但由于添加了React引导验证代码，只有setTimeout方法不起作用。 我找不到我错过的地方，应该修复。 您能告诉我代码和文档之间的区别吗。 此外，我还向代码中添加注释以使其更清晰。 PS：我调试了我的代码。我发现代码被跳过了。 我正在调查原因 .then(response => { if (response.dat
我刚刚根据React引导文档编写了代码。
当我按下提交按钮时，我确认验证已激活，数据已更改。
但由于添加了React引导验证代码，只有setTimeout方法不起作用。 我找不到我错过的地方，应该修复。
您能告诉我代码和文档之间的区别吗。
此外，我还向代码中添加注释以使其更清晰。
PS：我调试了我的代码。我发现代码被跳过了。 我正在调查原因
.then(response => {
if (response.data != null) {
alert('編集完了！')
window.setTimeout(() => {
history.push("/")
}, 1000)
}
})
import axios from 'axios'
import { useEffect, useState } from 'react'
import { Card, Form, Button, Col } from 'react-bootstrap';
import React, { Component } from 'react'
import { BrowserRouter, Route, Link, useHistory } from 'react-router-dom'
import Box from '@material-ui/core/Box';
import { Copyright } from './Copyright';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faList, faHome, faClipboardCheck } from '@fortawesome/free-solid-svg-icons'
export const EditData = (props) => {
const history = useHistory()
const id = props.listNo;
const [dataOne, setDataOne] = useState({});
useEffect(() => {
axios.get("http://localhost:8080/action/edit/" + id).then((response) =>
setDataOne(response.data)
)
}, [])
const handleChange = event => {
setDataOne({ ...dataOne, [event.target.name]: event.target.value });
};
const handleSubmit = event => {
event.preventDefault();
const list = {
listNo: dataOne.listNo,
softwareName: dataOne.softwareName,
saiyouDate: dataOne.saiyouDate,
version: dataOne.version,
shubetu: dataOne.shubetu,
licenseManage: dataOne.licenseManage,
youto: dataOne.youto,
bikou: dataOne.bikou,
authorizer: dataOne.authorizer,
approvalDate: dataOne.approvalDate,
url: dataOne.url
}
axios.post("http://localhost:8080/action/edit/contents", list)
.then(response => {
if (response.data != null) {
alert('編集完了！')
window.setTimeout(() => {
history.push("/")
}, 1000)
}
})
};
return (
<div>
<div className="container">
<Card>
<Card.Header className="text-center" style={{ backgroundColor: '#75A9FF', color: '#FFF' }}>
<FontAwesomeIcon icon={faList} />使用許可ソフトウェアリスト
</Card.Header>
<Form id="listFormId" onSubmit={handleSubmit}>
<Form.Control
required
type="hidden"
name="listNo"
value={dataOne.listNo || ""}
onChange={handleChange}
/>
<Card.Body>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>ソフトウェア名</Form.Label>
<Form.Control
type="text"
name="softwareName"
value={dataOne.softwareName || ""}
onChange={handleChange}
/>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>採用日</Form.Label>
<Form.Control
type="text"
name="saiyouDate"
value={dataOne.saiyouDate || ""}
onChange={handleChange} />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>バージョン</Form.Label>
<Form.Control
type="text"
name="version"
value={dataOne.version || ""}
onChange={handleChange}
/>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>種別</Form.Label>
<Form.Control
type="text"
name="shubetu"
value={dataOne.shubetu || ""}
onChange={handleChange} />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>ライセンス</Form.Label>
<Form.Control
type="text"
name="licenseManage"
value={dataOne.licenseManage || ""}
onChange={handleChange} />
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>用途</Form.Label>
<Form.Control
type="text"
name="youto"
value={dataOne.youto || ""}
onChange={handleChange} />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>備考</Form.Label>
<Form.Control
type="text"
name="bikou"
value={dataOne.bikou || ""}
onChange={handleChange} />
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>承認者</Form.Label>
<Form.Control
type="text"
name="authorizer"
value={dataOne.authorizer || ""}
onChange={handleChange} />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>承認日</Form.Label>
<Form.Control
type="text"
name="approvalDate"
value={dataOne.approvalDate || ""}
onChange={handleChange} />
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>URL</Form.Label>
<Form.Control
type="text"
name="url"
value={dataOne.url || ""}
onChange={handleChange} />
</Form.Group>
</Form.Row>
</Card.Body>
<Card.Footer style={{ "textAlign": "right" }}>
<Link to="/">
<Button size="sm" variant="outline-primary" type="button">
<FontAwesomeIcon icon={faHome} />トップ
</Button>
</Link>
<Button size="sm" variant="outline-success" type="submit" style={{ marginLeft: '10px' }} >
<FontAwesomeIcon icon={faClipboardCheck} /> 編集完了
</Button>
</Card.Footer>
</Form>
</Card>
</div>
<Box pt={4} pb={4}>
<Copyright />
</Box>
</div>
)
}
从“axios”导入axios
从“react”导入{useEffect，useState}
从“react bootstrap”导入{Card、Form、Button、Col}；
从“React”导入React，{Component}
从“react router dom”导入{BrowserRouter，Route，Link，useHistory}
从“@material ui/core/Box”导入框；
从“./版权”导入{版权}；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}
从“@fortwome/free solid svg icons”导入{faList、faHome、faClipboardCheck}
导出常量EditData=（道具）=>{
const history=useHistory（）
const id=props.listNo；
const[dataOne，setDataOne]=useState（{}）；
useffect（（）=>{
axios.get（“http://localhost:8080/action/edit/“+id）。然后（（响应）=>
setDataOne（response.data）
)
}, [])
const handleChange=事件=>{
setDataOne（{…dataOne，[event.target.name]：event.target.value}）；
};
const handleSubmit=事件=>{
event.preventDefault（）；
常数列表={
listNo:dataOne.listNo，
softwareName:dataOne.softwareName，
saiyouDate:dataOne.saiyouDate，
版本：dataOne.version，
shubetu:dataOne.shubetu，
licenseManage:dataOne.licenseManage，
youto:dataOne.youto，
比库：数据一号，比库，
授权人：dataOne.authorizer，
approvalDate:dataOne.approvalDate，
url:dataOne.url
}
axios.post（“http://localhost:8080/action/edit/contents“，列表）
。然后（响应=>{
if（response.data！=null）{
警惕（'編集完了！')
window.setTimeout（（）=>{
历史记录。推送（“/”）
}, 1000)
}
})
};
返回(
使用許可ソフトウェアリスト
ソフトウェア名
採用日
バージョン
種別
ライセンス
用途
備考
承認者
承認日
统一资源定位地址
トップ
編集完了
)
}
import axios from 'axios'
import { useEffect, useState } from 'react'
import { Card, Form, Button, Col } from 'react-bootstrap';
import React, { Component } from 'react'
import { BrowserRouter, Route, Link, useHistory } from 'react-router-dom'
import Box from '@material-ui/core/Box';
import { Copyright } from './Copyright';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faList, faHome, faClipboardCheck } from '@fortawesome/free-solid-svg-icons'
export const EditData = (props) => {
const [validated, setValidated] = useState(false);//Add
const history = useHistory()
const id = props.listNo;
const [dataOne, setDataOne] = useState({});
useEffect(() => {
axios.get("http://localhost:8080/action/edit/" + id).then((response) =>
setDataOne(response.data)
)
}, [])
const handleChange = event => {
setDataOne({ ...dataOne, [event.target.name]: event.target.value });
};
const handleSubmit = event => {
//Add and Change code
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
setValidated(true);
} else {
const list = {
listNo: dataOne.listNo,
softwareName: dataOne.softwareName,
saiyouDate: dataOne.saiyouDate,
version: dataOne.version,
shubetu: dataOne.shubetu,
licenseManage: dataOne.licenseManage,
youto: dataOne.youto,
bikou: dataOne.bikou,
authorizer: dataOne.authorizer,
approvalDate: dataOne.approvalDate,
url: dataOne.url
}
axios.post("http://localhost:8080/action/edit/contents", list)
.then(response => {
if (response.data != null) {
alert('編集完了！')
window.setTimeout(() => {
history.push("/")
}, 1000)
}
})
}
};
return (
<div>
<div className="container">
<Card>
<Card.Header className="text-center" style={{ backgroundColor: '#75A9FF', color: '#FFF' }}>
<FontAwesomeIcon icon={faList} />使用許可ソフトウェアリスト
</Card.Header>
{// add novalidate and required
}
<Form id="listFormId" noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Control
required
type="hidden"
name="listNo"
value={dataOne.listNo || ""}
onChange={handleChange}
/>
<Card.Body>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>ソフトウェア名</Form.Label>
<Form.Control
required
type="text"
name="softwareName"
value={dataOne.softwareName || ""}
onChange={handleChange}
/>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>採用日</Form.Label>
<Form.Control
required
type="text"
name="saiyouDate"
value={dataOne.saiyouDate || ""}
onChange={handleChange} />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>バージョン</Form.Label>
<Form.Control
required
type="text"
name="version"
value={dataOne.version || ""}
onChange={handleChange}
/>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>種別</Form.Label>
<Form.Control
required
type="text"
name="shubetu"
value={dataOne.shubetu || ""}
onChange={handleChange} />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>ライセンス</Form.Label>
<Form.Control
required
type="text"
name="licenseManage"
value={dataOne.licenseManage || ""}
onChange={handleChange} />
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>用途</Form.Label>
<Form.Control
required
type="text"
name="youto"
value={dataOne.youto || ""}
onChange={handleChange} />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>備考</Form.Label>
<Form.Control
type="text"
name="bikou"
value={dataOne.bikou || ""}
onChange={handleChange} />
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>承認者</Form.Label>
<Form.Control
required
type="text"
name="authorizer"
value={dataOne.authorizer || ""}
onChange={handleChange} />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>承認日</Form.Label>
<Form.Control
required
type="text"
name="approvalDate"
value={dataOne.approvalDate || ""}
onChange={handleChange} />
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>URL</Form.Label>
<Form.Control
required
type="text"
name="url"
value={dataOne.url || ""}
onChange={handleChange} />
</Form.Group>
</Form.Row>
</Card.Body>
<Card.Footer style={{ "textAlign": "right" }}>
<Link to="/">
<Button size="sm" variant="outline-primary" type="button">
<FontAwesomeIcon icon={faHome} />トップ
</Button>
</Link>
<Button size="sm" variant="outline-success" type="submit" style={{ marginLeft: '10px' }} >
<FontAwesomeIcon icon={faClipboardCheck} /> 編集完了
</Button>
</Card.Footer>
</Form>
</Card>
</div>
<Box pt={4} pb={4}>
<Copyright />
</Box>
</div>
)
}
从“axios”导入axios
从“react”导入{useEffect，useState}
从“react bootstrap”导入{Card、Form、Button、Col}；
从“React”导入React，{Component}
从“react router dom”导入{BrowserRouter，Route，Link，useHistory}
从“@material ui/core/Box”导入框；
从“./版权”导入{版权}；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}
从“@fortwome/free solid svg icons”导入{faList、faHome、faClipboardCheck}
导出常量EditData=（道具）=>{
const[validated，setValidated]=useState（false）；//添加
const history=useHistory（）
const id=props.listNo；
const[dataOne，setDataOne]=useState（{}）；
useffect（（）=>{
axios.get（“http://localhost:8080/action/edit/“+id）。然后（（响应）=>
setDataOne（response.data）
)
}, [])
const handleChange=事件=>{
setDataOne（{…dataOne，[事件
event.preventDefault();
//Add and Change code
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.stopPropagation();
setValidated(true);
} else {