如何通过单击电子邮件中的 link 来设置编辑框值（在 React 应用程序中）？

Question

我是 React 编程的新手，我不知道如何在用户单击 link 电子邮件时从网页上的 hyperlink 设置 "incoming data"。

换句话说，我收到一封带有 link 的电子邮件...我单击 link，link 将我带到一个网页并填充两个使用数据编辑框（来自 link）。

我知道如何编写后端 api 来接受 api 格式的数据，例如在 'discounts.js' api 文件中，我可以做到这个：

router.post('/discounts/:userCode/discount/:discountCode'

但是我想做的是通过电子邮件发送此 link，让用户单击 link 并在生成的页面中填充数据.

这是一个例子link

    example.com/discountPage/:snvpsnan8zosfluawpcn50ycdipa6rrqlym/code/:sdfiedgmmkfzuky2f6grds

所以用户点击link后，REACT网页编辑框应该是这样的：

给定以下反应（部分）组件：

class discountPage extends Component {
  constructor() {
    super();
    this.state = {
      userCode: '',
      discountCode: ''
      errors: {}
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

我想我也许可以在 componentDidMount 中设置数据 - 但真的不确定来自 link 的数据来自何处以及如何设置？

是道具来的吗？

  componentDidMount() {

    console.log('Register : componentDidMount ');

    this.setState({'userCode': this.props.userCode });
    this.setState({'discountCode': this.props.discountCode });
  }

更新

根据 Pinaka30 的回复...我做了一些搜索，发现了这个：

https://www.webdeveloperpal.com/2018/02/21/react-router-get-url-params/

import queryString from 'query-string';

class UserComponent extends React.Component{
 render(){
  // url is 'https://www.example.com/user?id=123&type=4';
  let url = this.props.location.search;
  let params = queryString.parse(url);
  console.log(params);
  // The result will be like below
  // { id: 123, type: 4 }
  // other code
 }
}

Answer 1

方法有很多种，我列出的方法可能不是最好的，但一定会给你想要的结果。
由于您正在单击 link，然后使用您的表单被重定向到一个新页面，因此该请求将是一个 GET 请求。正如我们所知，在 GET 请求的情况下，参数在 url 中可见。因此，您可以做的是从 url 本身检索 userCode 和 DiscountCode。

componentDidMount(){
  var url = window.location.href;  //Gives you the complete url
  temp = url.split(""); //Split the url to retrieve both parameters according to your format
  this.setState({
    userCode: temp[0],
    discountCode: temp[1]
  });
}

在您的渲染方法中，使用状态作为值

<input id="userCode" value={this.state.userCode} />
<input id="discountCode" value={this.state.discountCode} />

因此，一旦您的页面加载且组件呈现，componentDidMount 将被调用并更新将反映在您的输入框中的状态。仔细拆分 url 即可。我没有完全写那行，因为我不知道格式。

如何通过单击电子邮件中的 link 来设置编辑框值（在 React 应用程序中）？

how can I set edit box values (in react application) by clicking on a link in an email?

reactjs

hyperlink

react-props

react-state