react.js 使用链接传递值答案

【问题标题】：react.js pass value using linkreact.js 使用链接传递值
【发布时间】：2019-12-31 17:04:51
【问题描述】：

这是我的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 - 仍在学习）

【问题讨论】：

如果您将 value 属性传递给 input，则需要提供 onChange 处理程序。如果您不想自己处理更改，请使用 defaultValue 属性传递值，而不是 value。错误消息是不言自明的，它甚至需要任何解释。
这不起作用，请参阅here。它仍然没有给我任何东西。
有一百万个错误，在codesandbox上做个demo什么的
我是 codesandbox.io 的新手，但 here 是我的设置。

标签： javascript reactjs react-router-dom

【解决方案1】：

尝试将您的参数作为路径 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 组件的新输入应该是这样的

<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>

如果参数过多，则必须使用商店经理，（网址中的参数过多，丑陋且可能导致错误）

【讨论】：

当我使用 facebook 时，我会转到 facebook.com 或 facebook.com/notifications 而不是 facebook.com**userName** 这就是我对这个策略失去动力的原因。
Here 是我的代码。它没有按预期呈现。 Here 是它正在呈现的内容。
{this.state.errorName} 而不是 {this.props.errorName}
我要求再帮一个忙。你能看到this 并给我一些关于这个问题的解决方案或建议吗？

【解决方案2】：

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

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

试试这个：

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

【讨论】：

我的Route 看起来像这样：<Route path="/edit" component={ProfileEdit} />
您的路线必须类似于“/edit/:id”，然后您将状态值传递给链接并通过以下方式访问 ProfileEdit 组件中的状态值：this.props.params.match.id
当我使用 facebook 时，我转到 https://www.facebook.com/ 或 https://www.facebook.com/notifications 而不是 https://www.facebook.com/**userName**
那是 facebook，而 facebook 在 react 中还没有完全开发。如果要在 profileEdit 组件中传递状态值，则必须将其作为之类的道具传递
谈到facebook.com/username 那么路由定义为和Link 就像${this.state.profileId}} /> 并且该 profileId 在用户登录时存储在 sessionStorage 中，因此可以在用户注销或寡妇关闭之前使用。 react中不能设置session时间，可以通过后端编程来设置。