Question

这是我的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;

这是我的ProfileEdit课：

class ProfileEdit extends React.Component {
state={email:'',userName:'',userID:''};
render() {
    return(
        <div>
        ...
                        <TextField valueOfEmail={this.state.userID}/>
        ...
        </div>
    );
}
}
export default ProfileEdit;

这是我的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;

有时会给我错误，有时却不会，但是什么也没有。

这是我遇到的错误：

我使用了“ react-router-dom”：“ ^ 5.0.1”

如何解决此问题并使用<Link/>或更好的方法正确传递值。（ redux -仍在学习中）

Answer 1

我假设您的路线是这样的：

<Route path="/edit/:id" component=componentName />

尝试一下：

<Link to={`/edit/${this.state.value}`} />

Answer 2

尝试将您的参数作为路由器内部的路径url参数传递，因此将路由器组件更改为

<Route path="/edit/:id/:email/:name" component={ProfileEdit} />

或者，如果您不想让它们成为必需，只需将路由器设置为

<Route path="/edit/:id?/:email?/:name?" component={ProfileEdit} />

链接就像：

<Link to={{pathname:`/edit/${this.state.userID}/${this.state.email}/${this.state.userName}`}}>

然后在ProfileEdit组件中使用匹配道具访问那些信息

因此可以像这样访问这些值：

this.state.email = this.props.match.params.email;
this.state.userName = this.props.match.params.name;
this.state.userID = this.props.match.params.id;

还要消除抛出的错误：将onChange（受控）添加到您的输入中，或将其值替换为defaultValue attr（不受控制），有关更多信息，请参见this。

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>

如果参数过多，则必须使用商店管理器（url中的参数过多，难看，可能导致错误）

react.js使用链接传递值

2 个答案: