Question

我有一个包含以下内容的表单应用程序：

NavBar组件
表单组件（包含表单字段）
复选框组件（条款和条件）
SubmitButton组件
ThankYouPage组件

当用户填写表格时，组件1-4最初显示在屏幕上。当用户单击提交按钮时，我希望他或她被路由到“谢谢”页面。看完一个教程并添加一条路线后，当用户单击“提交”时，唯一会发生的事情就是在窗体下方显示ThankYouPage组件文本。我希望所有其他组件都消失，剩下的唯一是thankYouPage组件。有人可以告诉我我在做什么错吗？

App.js

import React from 'react';
import NavBar from './Components/NavBar'
import Form from './Components/InfoForm'
import SubmitButton from './Components/SubmitButton';
import Container from '@material-ui/core/Container';
import Checkbox from './Components/Checkbox';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';
import ThankYou from './Components/ThankYou';

function App() {

    const [state, setState] = React.useState({
        checkbox: false,
    });

    const [values, setValues] = React.useState({
        name: '',
        age: '',
        email: ''
    });

    const handleChangeForm = name => event => {
      setValues({ ...values, [name]: event.target.value });
    };

    const handleChange = event => {
      setState({ ...state, [event.target.name]: event.target.checked });
    };

    return (
        <Router>
            <div>
                 <Container maxWidth="md">
                 <NavBar />
                 <Form values={values} handleChangeForm={handleChangeForm} />
                 <Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
                 <SubmitButton isEnabled={state.checkbox} values={values}/> 
                 </Container>     
            </div>
                <Route path="/thankyou" component={ThankYou} />
        </Router>
    );
}

export default App;

SubmitButton.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';


export default function ContainedButtons(props) {
  const classes = useStyles();  

  const onClickBtn = () => {

    const textBuilder = () => {
      var doc = "";
      for (const key in props.values) {
       doc += key + ": " + props.values[key] + "<br/>";      
      }
      return doc;
    } 

    window.Email.send({
      Host : "smtp.elasticemail.com",
      Username : "mine@gmail.com",
      Password : "xxxx-xxxx-xxx-xxx",
      To : 'mine@gmail.com',
      From : "mine@gmail.com",
      Subject : "New Client Info",
      Body : textBuilder()
  }).then(
    message => alert(message)
  );
  };

    return (
      <div>
        <Link to="/thankyou">
          <Button variant="contained" color="primary" className={classes.button} disabled = {!props.isEnabled} type="submit" onClick={onClickBtn}>
            Submit
          </Button>
        </Link>
      </div>
    );
}

ThankYouPage.js

import React from 'react';

function ThankYou() {
  return (
    <div>
      <h2>Thank you and get ready to become a work of art!</h2>
    </div>
  );
}

export default ThankYou;

Answer 1

您可以将Route视为在路线匹配时将所述组件呈现在其位置的组件。

因此，当您拥有：

<Router>
  <div>
     <Container maxWidth="md">
        <NavBar />
        <Form values={values} handleChangeForm={handleChangeForm} />
        <Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
        <SubmitButton isEnabled={state.checkbox} values={values}/> 
     </Container>     
  </div>
  <Route path="/thankyou" component={ThankYou} />
</Router>

这意味着Container中的顶部是固定的，无论您走的是哪条路线。

相反，您需要的是在路线内渲染Container，以便在路线更改时消失。像这样：

<Router>
  <Route exact path="/" component={FormContainer} />
  <Route path="/thankyou" component={ThankYou} />
</Router>

提交表单时，可能需要执行验证。因此，最好的方法是以编程方式导航。

submitForm = () => {
  // assuming this component is in a route
  const { router } = this.props'
  router.push("/thankyou");
}
render() {
  return (
    <form onSubmit={this.submitForm}>
     <button type="submit">Submit</button>
    </form>
  );
}

More info on Programmatic Navigation

关于从客户端发送电子邮件，不要。每个访问您网站的人都可以使用该密码。编写服务器端脚本或使用mailto link

反应：如何在表单提交时正确路由？

1 个答案: