如何解决如何将用户名传递给兄弟组件？
我在应用程序的第一页创建了一个学生反馈应用程序我正在获取学生信息，在学生成功提交表单中的所有详细信息后，用户将被重定向到反馈页面，在反馈页面中他们会得到一些多项选择题，然后是更多的问题（几个问题以获得更好的回答）。在这些步骤之后，用户将收到一条感谢您的反馈信息，用户名应该是他们在第一个表单中输入的名称。
here is my Student Feedback code.
import React,{ Component } from 'react';
import { Button,Container,Form,Row } from 'react-bootstrap';
import vector from '../../images/01.png';
import Navbar from '../layout/Navbar';
import { connect } from "react-redux";
import { createStudent } from '../../store/actions/studentActions';
import ThankYou from './ThankYou';
const validIDRegex = RegExp(/^[A-Z][A-Z]\/[A-Z][A-Z]\/[A-Z][A-Z]\/[\d]{2}-[\d]{2}\/[\d]{2}$/i);
const validEmailRegex = RegExp(
/^((?!\.)[\w-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/gm
);
const validPhoneRegex = RegExp(/^\d{10}$/);
const validStringRegex = RegExp(/\d/);
class StudentDetails extends Component{
constructor() {
super();
this.state = {
id: "",course: "",name: "",phone:"",email: "",errors: {
id: "",}
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange = (event) => {
event.preventDefault();
this.setState(
{
[event.target.name]: event.target.value,}
);
let { name,value } = event.target;
let errors = this.state.errors;
switch (name) {
case 'id':
errors.id =
// value.length < 17
validIDRegex.test(value)
? ''
: 'Invalid ID';
break;
case 'course':
errors.course =
validStringRegex.test(value)
? 'Invalid Course'
: '';
break;
case 'name':
errors.name =
validStringRegex.test(value)
? 'Invalid Name'
: '';
break;
case 'phone':
errors.phone =
validPhoneRegex.test(value)
? ''
: 'Invalid Phone No.';
break;
case 'email':
errors.email =
validEmailRegex.test(value)
? ''
: 'Invalid Email';
break;
default:
break;
}
}
handleSubmit(e) {
e.preventDefault();
let errors = this.state.errors;
console.log(this.state);
if (errors.id === "") {
if (errors.name === "") {
if (errors.course === "") {
if ( errors.phone === "" ) {
if (errors.email === "") {
this.props.createStudent(this.state);
this.props.history.push("/Feedback");
}
}
}
}
}
}
componentDidMount(){
this.nameInput.focus();
}
render() {
const {errors} = this.state;
return (
<>
<Navbar />
<Container fluid className="body-bg">
<Row className="row">
<div className="center">
<h4 className="heading">Lets Make Our Training Better</h4>
<p>Be Expressive,Be Honest</p>
</div>
<Container>
<section className="main" sm={12}>
<div className="form_div" sm={12} md={8}>
<Form onSubmit={this.handleSubmit} id="myForm">
<div className="form-group">
<div className="error-div">
<label className="label">Your Student ID</label>
{errors.id.length > 0 &&
<span className='error'>{errors.id}</span>}
</div>
<input type="text" maxLength="17" name="id" ref={(input) => { this.nameInput = input; }} value={this.state.id} onChange={this.handleChange} className="form-control" placeholder="AD/RH/WM/08-19/27" required/>
<p>You can check this on your i-card or contact us please.</p>
</div>
<div className="form-group">
<div className="error-div">
<label className="label">Your Course</label>
{errors.course.length > 0 &&
<span className='error'>{errors.course}</span>}
</div>
<input type="text" className="form-control" name="course" value={this.state.course} onChange={this.handleChange} required/>
</div>
<div className="form-group">
<div className="error-div">
<label className="label">Your Name</label>
{errors.name.length > 0 &&
<span className='error'>{errors.name}</span>}
</div>
<input type="text" className="form-control" name="name" value={this.state.name} onChange={this.handleChange} required/>
</div>
<div className="form-group">
<div className="error-div">
<label className="label">Your Mobile No.</label>
{errors.phone.length > 0 &&
<span className='error'>{errors.phone}</span>}
</div>
<input type="text" maxLength="10" className="form-control" name="phone" value={this.state.phone} onChange={this.handleChange} required/>
</div>
<div className="form-group">
<div className="error-div">
<label className="label">Your Email Address</label>
{errors.email.length > 0 &&
<span className='error'>{errors.email}</span>}
</div>
<input type="email" className="form-control" name="email" value={this.state.email} onChange={this.handleChange} required/>
</div>
<div className="btn-grp">
<Button type="reset" className="warning" variant="warning" >Reset</Button>
<Button variant="primary" type="submit">Next</Button>
</div>
</Form>
</div>
<div className="vector" sm={12} md={4}>
<img src={vector} alt="vector"/>
</div>
</section>
</Container>
</Row>
</Container>
</>
);
}
}
const mapStatetoProps = (state) => {
return { auth: state.firebase.auth };
};
const mapdispatchToProps = (dispatch) => {
return {
createStudent: (student) => {
dispatch(createStudent(student));
},};
};
export default connect(mapStatetoProps,mapdispatchToProps)(StudentDetails);
And inside the ThankYou page i am trying to get the username which was supposed to be entered by user. And because i am not using login system inside my Feedback app,so how can i apply auth guards to my application?
import React from 'react';
import { Link } from "react-router-dom";
import Navbar from '../layout/Navbar';
const ThankYou = (props) => {
return (
<>
<Navbar/>
<div className="center thankyou-div">
<h1 className="heading">ThankYou</h1>
<h3><strong><span className="text-warning">{props.userName}</span> for your valuable Feedback</strong></h3>
<p className="Feedback-link"><Link to="/">Go to Feedback again</Link></p>
</div>
</>
);
}
export default ThankYou;
解决方法
您可以尝试推送用户名：
this.props.history.push({
pathname: '/feedback',state: { userName: this.state.name }
})
在Thank You组件中，像这样获取它：
const ThankYou = (props) => {
return (
<>
<Navbar/>
<div className="center thankyou-div">
<h1 className="heading">ThankYou</h1>
<h3><strong><span className="text-warning"> {props.location.state.userName}</span> for your valuable feedback</strong></h3>
<p className="feedback-link"><Link to="/">Go to Feedback again</Link></p>
</div>
</>
);
}
使用 React-Router history.push，您还可以发送额外的数据。您会在此处找到更多示例：How to pass params with history.push/Link/Redirect in react-router v4?
更新： 可以找到解决方案here 问题是学生数据没有保存在 studentReducer 中。因此，现在可以使用 Redux 从最终的感谢组件中提取正确的用户详细信息。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
