我正在尝试从最低级别组件上的输入字段捕获数据

Question

我的状态位于我的APP级别组件中，并且我试图捕获放入表单组件中的数据。我正在使用挂钩，但是我无法弄清楚自己在做什么错！

我曾尝试将状态置于表单级别，但返回的状态未定义，我的最终目标是将该数据发送到firebase，并将其显示在应用程序另一页的表中。

APP

import React, { useState, createRef } from "react";
import { render } from "react-dom";

import Header from "./components/Header";
import About from "./components/About";

const App = () => {
  const [date, setDate] = useState("");
  const [name, setName] = useState("");
  const [hours, setHours] = useState("");
  const [description, setDescription] = useState("");

  return (
    <div>
      <Header />
    </div>
  );
};

render(<App />, document.getElementById("root"));

** HEADER / ROUTER组件

import React from "react";
import { render } from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink,
  Link
} from "react-router-dom";

import Home from "./pages/home/Home";
import Data from "./pages/data/Data";
import About from "./pages/about/About";
import Contact from "./pages/contact/Contact";


import "../style.css";

const Header = () => {
  return (
    <Router>
      <div>
        <nav className="navbar">
          <NavLink className="link nav-item" to="/entry">
            Time Entry
          </NavLink>
          <NavLink className="link nav-item" to="/data">
            Data
          </NavLink>
          <NavLink className="link nav-item-right" to="/about">
            About
          </NavLink>
          <NavLink className="link nav-item-right" to="/contact">
            Contact
          </NavLink>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route exact path="/entry" component={Home} />
          <Route exact path="/data" component={Data} />
          <Route exact path="/about" component={About} />
          <Route exact path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
};

export default Header;

HOME页面组件

import React, { Fragment } from "react";

import InputForm from "./Form";

const Home = props => {
  return (
    <Fragment>
      <InputForm />
    </Fragment>
  );
};

export default Home;

FORM组件

import React, { Fragment, useState, createRef } from "react";
import { Button, Form, FormGroup, Label, Input, FormText } from "reactstrap";

const InputForm = props => {


  const dateEntry = createRef();
  const nameEntry = createRef();
  const hourEntry = createRef();
  const descriptionEntry = createRef();

  const handleClick = e => {
    e.preventDefault();
    setDate(dateEntry.current.value);
    setName(nameEntry.current.value);
    setHours(hourEntry.current.value);
    setDescription(descriptionEntry.current.value);
    // console.log(nameEntry.current.value);
  };

  return (
    <Form className="data-entry">
      <FormGroup className="form-entry-items">
        <Label className="label">Date</Label>
        <Input type="date" className="input" ref={dateEntry} />
      </FormGroup>
      <FormGroup className="form-entry-items">
        <Label className="label">Lease Acconting Manager Name</Label>{" "}
        <Input type="text" className="input" ref={nameEntry} />
      </FormGroup>
      <FormGroup className="form-entry-items">
        <Label className="label">Hours Worked</Label>{" "}
        <Input className="input" ref={hourEntry}/>
      </FormGroup>
      <FormGroup className="form-entry-items">
        <Label className="label">Description</Label>{" "}
        <Input type="textarea" className="input" ref={descriptionEntry}/>
      </FormGroup>
      <Button onClick={handleClick}>Submit</Button>
    </Form>
  );
};

export default InputForm;

Answer 1

首先，您应该质疑为什么要使用仅由[[InputForm使用的值来设置APP的状态。如果您只想在InputForm中使用它们，则应将状态移至该Component。

也许只是将state设置在

InputForm

内，而不要使用createRef，这样就可以在没有propdrilling或类似东西的情况下在其中进行处理。

import React, { Fragment, useState, createRef } from "react";
import { Button, Form, FormGroup, Label, Input, FormText } from "reactstrap";

const InputForm = props => {

  const [date, setDate] = useState("");
  const [name, setName] = useState("");
  const [hours, setHours] = useState("");
  const [description, setDescription] = useState("");

  /* Im not sure How this works inside your component Input, but why dont just use a onChange?*/
  const dateEntry = createRef();
  const nameEntry = createRef();
  const hourEntry = createRef();
  const descriptionEntry = createRef();

  const handleInput = ( e, type)  => {
    switch( type ){
     case'name':
       setName( e.target.value );
     break;
     case'date':
       setDate( e.target.value );
     break;
    case'description':
       setDescription( e.target.value );
     break;
     case'hours':
       setHours( e.target.value );
     break;
    }
  }

  const handleClick = e => {
    e.preventDefault();
    //Just submit your data or something...  
  };

  return (
    <Form className="data-entry">
      <FormGroup className="form-entry-items">
        <Label className="label">Date</Label>
        <Input type="date" className="input" ref={dateEntry} onChange={ e => {handleChange( e, 'date') } } />
      </FormGroup>
      <FormGroup className="form-entry-items">
        <Label className="label">Lease Acconting Manager Name</Label>{" "}
        <Input type="text" className="input" ref={nameEntry} onChange={ e => {handleChange( e, 'name' ) } } />
      </FormGroup>
      <FormGroup className="form-entry-items">
        <Label className="label">Hours Worked</Label>{" "}
        <Input className="input" ref={hourEntry} onChange={ e => {handleChange( e, 'hours') } }/>
      </FormGroup>
      <FormGroup className="form-entry-items">
        <Label className="label">Description</Label>{" "}
        <Input type="textarea" className="input" ref={descriptionEntry} onChange={ e => {handleChange( e, 'description') } }/>
      </FormGroup>
      <Button onClick={handleClick}>Submit</Button>
    </Form>
  );
};

export default InputForm;

如果需要从任何其他组件访问Form值，请尝试使用
context

来实现相同的值，并可能尝试向其中添加一些actions和reducers。如果需要更多信息，请尝试以下方法：Context Docs，Reducer Docs