[英]react.js pass value using link
Here is my Profile
class : 这是我的
Profile
课:
class Profile extends React.Component {
state={email:'',userName:'',userID:''};
render() {
return(
<div>
...
<Link to={{pathname:"/edit",state:this.props.state}}>
...
</div>
);
}
}
export default Profile;
And here is my ProfileEdit
class : 这是我的
ProfileEdit
类:
class ProfileEdit extends React.Component {
state={email:'',userName:'',userID:''};
render() {
return(
<div>
...
<TextField valueOfEmail={this.state.userID}/>
...
</div>
);
}
}
export default ProfileEdit;
And here is my TextField
class : 这是我的
TextField
类:
class TextField extends React.Component {
render() {
const {valueOfEmail}=this.props;
return (
<div>
<div className="form-label-group">
<input type="text" id="inputEmail" value={valueOfEmail} className="form-control" placeholder="Name" required autoFocus/>
<label htmlFor="inputEmail">Enter Name</label>
</div>
</div>
);
}
}
export default TextField;
It gives me error sometimes and sometime it doesn't, but it renders nothing. 它有时会给我错误,有时却不会,但是什么也没有。
Here is the error I have got : 这是我得到的错误:
I have used "react-router-dom": "^5.0.1" 我已使用“ react-router-dom”:“ ^ 5.0.1”
How to resolve this and pass value correctly using <Link/>
or something better.(Except redux - still learning) 如何解决这个问题并使用
<Link/>
或更好的方法正确传递值。( redux除外-仍在学习中)
I'm assuming that your route is like this: 我假设您的路线是这样的:
<Route path="/edit/:id" component=componentName />
Try this : 尝试这个 :
<Link to={`/edit/${this.state.value}`} />
try to pass your params as path url params inside your router , So change your router component to 尝试将您的参数作为路由器内部的路径url参数传递,因此将路由器组件更改为
<Route path="/edit/:id/:email/:name" component={ProfileEdit} />
or if you want to make them not required just set your router to 或者,如果您不想设置它们,只需将路由器设置为
<Route path="/edit/:id?/:email?/:name?" component={ProfileEdit} />
the link would be somthing like : 该链接将是这样的:
<Link to={{pathname:`/edit/${this.state.userID}/${this.state.email}/${this.state.userName}`}}>
then in the ProfileEdit
component access those info by using the match props 然后在
ProfileEdit
组件中使用匹配道具访问那些信息
so the values get accessed like : 因此可以像这样访问这些值:
this.state.email = this.props.match.params.email;
this.state.userName = this.props.match.params.name;
this.state.userID = this.props.match.params.id;
also the to remove error thrown : add onChange (controlled) to your input or replace value with defaultValue attr (uncontrolled ) see this for more info . 也抛出删除错误:添加的onChange(控制),以你的输入或替换默认值ATTR(不受控制)值看到此获取更多信息。
the new input of TextField Component should look like TextField Component的新输入应如下所示
<div className="form-label-group">
<input type="text" id="inputEmail" defaultValue={valueOfEmail} className="form-control" placeholder="Name" required autoFocus/>
<label htmlFor="inputEmail">Enter Name</label>
</div>
if there are too mush params then you have to use a store manager , (too mush param in url , ugly and could lead to errors ) 如果存在过多的糊状参数,则必须使用商店管理器,(url中的糊状参数太丑陋,可能会导致错误)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.