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

Question

我是新来的响应编程者，我不知道当用户单击电子邮件的链接时如何从网页的超链接设置“传入数据”。

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

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

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

但是，我要做的是通过电子邮件发送此链接，让用户单击该链接，并在结果页面中填充数据。

这是示例链接

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

因此，在用户单击链接之后，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中设置数据-但真的不确定来自链接的数据来自何处以及如何设置？

它来自道具吗？

  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

可以有很多方法，我列出的方法可能不是最好的方法，但是肯定会给您想要的结果。
由于您正在单击链接，然后使用表单将其重定向到新页面，因此该请求将是GET请求。众所周知，在GET请求的情况下，参数在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]
  });
}

在渲染方法中，使用state作为值

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

因此，一旦页面加载并呈现组件，就会调用componentDidMount并更新状态，这些状态将反映在输入框中。只需仔细分割网址即可。我没有完全写那行，因为我不知道格式。