Javascript 使用Refs从react.js中的表单获取文本输入
React.js是个新手,我在使用Refs获取表单数据时遇到了一个问题。我希望能够将数据传递给我将要创建的多个组件。我正在使用我购买的教程,一切正常,但当我在自己的应用程序中使用这些信息并提交表单时,我会发现下面的错误。我一辈子都想不出我会错过什么。下面是我的组件代码,我收到的错误也粘贴在下面。非常感谢您的帮助。谢谢 错误:Javascript 使用Refs从react.js中的表单获取文本输入,javascript,reactjs,forms,next.js,Javascript,Reactjs,Forms,Next.js,React.js是个新手,我在使用Refs获取表单数据时遇到了一个问题。我希望能够将数据传递给我将要创建的多个组件。我正在使用我购买的教程,一切正常,但当我在自己的应用程序中使用这些信息并提交表单时,我会发现下面的错误。我一辈子都想不出我会错过什么。下面是我的组件代码,我收到的错误也粘贴在下面。非常感谢您的帮助。谢谢 错误: VM7473:1 Fetch API cannot load webpack://%5Bname%5D_%5Bchunkhash%5D/./node_modules/rea
VM7473:1 Fetch API cannot load webpack://%5Bname%5D_%5Bchunkhash%5D/./node_modules/react-dom/cjs/react-dom.development.js?. URL scheme must be "http" or "https" for CORS request.
(anonymous) @ VM7473:1
_callee$ @ index.js:2429
tryCatch @ index.js:2616
invoke @ index.js:2850
prototype.(anonymous function) @ index.js:2668
step @ index.js:2493
(anonymous) @ index.js:2493
(anonymous) @ index.js:2493
(anonymous) @ index.js:2452
_callee2$ @ index.js:2421
tryCatch @ index.js:2616
invoke @ index.js:2850
prototype.(anonymous function) @ index.js:2668
step @ index.js:2493
(anonymous) @ index.js:2493
(anonymous) @ index.js:2493
map @ index.js:2489
getStackFrames @ index.js:2270
crashWithFrames @ index.js:1927
(anonymous) @ index.js:1942
errorHandler @ index.js:1992
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:270
executeDispatch @ react-dom.development.js:561
executeDispatchesInOrder @ react-dom.development.js:583
executeDispatchesAndRelease @ react-dom.development.js:680
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:688
forEachAccumulated @ react-dom.development.js:662
runEventsInBatch @ react-dom.development.js:816
runExtractedEventsInBatch @ react-dom.development.js:824
handleTopLevel @ react-dom.development.js:4820
batchedUpdates$1 @ react-dom.development.js:18932
batchedUpdates @ react-dom.development.js:2150
dispatchEvent @ react-dom.development.js:4899
interactiveUpdates$1 @ react-dom.development.js:18987
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4876
error (async)
registerUnhandledError @ index.js:2005
listenToRuntimeErrors @ index.js:1941
startReportingRuntimeErrors @ index.js:1786
connect @ hot-dev-client.js:84
_default @ webpack-hot-middleware-client.js:89
./node_modules/next/dist/client/next-dev.js @ next-dev.js:21
__webpack_require__ @ bootstrap:789
fn @ bootstrap:150
0 @ module.js:22
__webpack_require__ @ bootstrap:789
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
AddOfferForm.js:12 Uncaught TypeError: Cannot read property 'value' of undefined
at AddOfferForm.js:12
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
at executeDispatch (react-dom.development.js:561)
at executeDispatchesInOrder (react-dom.development.js:583)
at executeDispatchesAndRelease (react-dom.development.js:680)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:688)
at forEachAccumulated (react-dom.development.js:662)
at runEventsInBatch (react-dom.development.js:816)
at runExtractedEventsInBatch (react-dom.development.js:824)
at handleTopLevel (react-dom.development.js:4820)
at batchedUpdates$1 (react-dom.development.js:18932)
at batchedUpdates (react-dom.development.js:2150)
at dispatchEvent (react-dom.development.js:4899)
at interactiveUpdates$1 (react-dom.development.js:18987)
at interactiveUpdates (react-dom.development.js:2169)
at dispatchInteractiveEvent (react-dom.development.js:4876)
(anonymous) @ AddOfferForm.js:12
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:270
executeDispatch @ react-dom.development.js:561
executeDispatchesInOrder @ react-dom.development.js:583
executeDispatchesAndRelease @ react-dom.development.js:680
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:688
forEachAccumulated @ react-dom.development.js:662
runEventsInBatch @ react-dom.development.js:816
runExtractedEventsInBatch @ react-dom.development.js:824
handleTopLevel @ react-dom.development.js:4820
batchedUpdates$1 @ react-dom.development.js:18932
batchedUpdates @ react-dom.development.js:2150
dispatchEvent @ react-dom.development.js:4899
interactiveUpdates$1 @ react-dom.development.js:18987
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4876
react-dom.development.js:289 Uncaught TypeError: Cannot read property 'value' of undefined
at AddOfferForm.js:12
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
at executeDispatch (react-dom.development.js:561)
at executeDispatchesInOrder (react-dom.development.js:583)
at executeDispatchesAndRelease (react-dom.development.js:680)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:688)
at forEachAccumulated (react-dom.development.js:662)
at runEventsInBatch (react-dom.development.js:816)
at runExtractedEventsInBatch (react-dom.development.js:824)
at handleTopLevel (react-dom.development.js:4820)
at batchedUpdates$1 (react-dom.development.js:18932)
at batchedUpdates (react-dom.development.js:2150)
at dispatchEvent (react-dom.development.js:4899)
at interactiveUpdates$1 (react-dom.development.js:18987)
at interactiveUpdates (react-dom.development.js:2169)
at dispatchInteractiveEvent (react-dom.development.js:4876)
(anonymous) @ AddOfferForm.js:12
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:270
executeDispatch @ react-dom.development.js:561
executeDispatchesInOrder @ react-dom.development.js:583
executeDispatchesAndRelease @ react-dom.development.js:680
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:688
forEachAccumulated @ react-dom.development.js:662
runEventsInBatch @ react-dom.development.js:816
runExtractedEventsInBatch @ react-dom.development.js:824
handleTopLevel @ react-dom.development.js:4820
batchedUpdates$1 @ react-dom.development.js:18932
batchedUpdates @ react-dom.development.js:2150
dispatchEvent @ react-dom.development.js:4899
interactiveUpdates$1 @ react-dom.development.js:18987
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4876
代码:
从“React”导入React;
类AddOfferForm扩展了React.Component{
nameRef=React.createRef();
addOffer=(事件)=>{
//1.停止提交表格
event.preventDefault();
//2.从该输入中获取文本
log(this.nameRef.value.value);
//3.对我的数据做点什么
}
render(){
返回(
+加价
);
}
}
导出默认的AddOfferForm;
你离得不远。您需要将React.createRef()
包装在构造函数中,并使用this.nameRef.current
在渲染中访问它。查看。你离得不远。您需要将React.createRef()
包装在构造函数中,并使用this.nameRef.current
在渲染中访问它。查看。更改此控制台.log(this.nameRef.value.value)代码>用于console.log(this.nameRef.current.value)代码>
文档始终有助于=>更改此console.log(this.nameRef.value.value)代码>用于console.log(this.nameRef.current.value)代码>
文档总是有帮助=>为什么要记录两个值?“价值,价值”?nameRef应该是对本机dom元素的引用,没有value.value,为什么要记录两个值?“价值,价值”?nameRef应该是对本机dom元素的引用,没有处理它的value.value。非常感谢你的帮助!不用客气,你可以帮我回答我的第一个问题。非常感谢你的帮助!不客气,你可以帮我回答我的第一个问题
import React from 'react';
class AddOfferForm extends React.Component {
nameRef = React.createRef();
addOffer = (event) =>{
// 1. Stop form from submitting
event.preventDefault();
// 2. get the text from that input
console.log(this.nameRef.value.value);
// 3. Do Something with my data
}
render() {
return (
<>
<form onSubmit={this.addOffer}>
<input
name="name"
ref={this.nameRef}
type = "text"
placeholder="Name"
/>
<input
name="exp-date"
ref={this.expRef}
type = "text"
placeholder="Experation Date"
/>
<textarea
name="desc"
ref={this.descRef}
placeholder="Desciption"
/>
<input
name="exempt"
ref={this.exemptRef}
type = "text"
placeholder="Exempt Description"
/>
<button type="submit">+ Add Offer</button>
</form>
</>
);
}
}
export default AddOfferForm;