使用 Refs 从 react.js 中的表单获取文本输入

Question

对 React.js 相当陌生，我运行遇到了使用 Refs 获取我的表单数据的问题。我希望能够将数据传递到我将要创建的多个组件。我正在使用我购买的教程并且一切正常但是当我在我自己的应用程序中使用该信息并提交表单时我收到以下错误。无法弄清楚我可能会错过什么。我的组件的代码在下面，我收到的错误也粘贴在下面。非常感谢任何帮助。谢谢！

错误：

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 @ react-dom.development.js:18932
batchedUpdates @ react-dom.development.js:2150
dispatchEvent @ react-dom.development.js:4899
interactiveUpdates @ 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 (react-dom.development.js:18932)
    at batchedUpdates (react-dom.development.js:2150)
    at dispatchEvent (react-dom.development.js:4899)
    at interactiveUpdates (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 @ react-dom.development.js:18932
batchedUpdates @ react-dom.development.js:2150
dispatchEvent @ react-dom.development.js:4899
interactiveUpdates @ 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 (react-dom.development.js:18932)
    at batchedUpdates (react-dom.development.js:2150)
    at dispatchEvent (react-dom.development.js:4899)
    at interactiveUpdates (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 @ react-dom.development.js:18932
batchedUpdates @ react-dom.development.js:2150
dispatchEvent @ react-dom.development.js:4899
interactiveUpdates @ react-dom.development.js:18987
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4876

代码：

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;

Answer 1

你离得不远了。您需要将 React.createRef() 包装在构造函数中，并使用 this.nameRef.current 在渲染内部访问它。查看 docs.

Answer 2

将此 console.log(this.nameRef.value.value); 更改为 console.log(this.nameRef.current.value);

文档总是有帮助 => https://reactjs.org/docs/refs-and-the-dom.html

使用 Refs 从 react.js 中的表单获取文本输入

getting text input from a form in react.js using Refs

javascript

forms

reactjs

next.js