Question

我有一个使用jquery的工作版本，但是在响应中遇到很多问题。

这是我的jquery代码。

    var filter1 = $("#IDXT001").val();
    var filter2 = $("#IDXT002").val();
    var filter3 = $("#IDXT003").val();

    var queryURL = "http://api/ixmasterdocument?filter=idxt001|" + filter1 + "&filter=idxt002|" + filter2 + "&filter=idxt003|" + filter3;

$.ajax({
      url: queryURL,
      method: "GET"
    }).then(data => {
        document.getElementById("test").innerHTML = data.map(function(contracts) {
          return contracts.Fields.map(function(docs) {
            return "<p>" + docs.DisplayName + ": " + docs.DataValue + "</p>";
          }).join("<br/>");

试图在react中创建相同的内容。

import axios from "axios"; 

const filter1 = document.getElementById("IDXT001").val();
const filter2 = document.getElementById("IDXT002").val();
const filter3 = document.getElementById("IDXT003").val();

const BASEURL = "http://api/ixmasterdocumentfilter=idxt001|" + filter1 + "&filter=idxt002|" + filter2 + "&filter=idxt003|" + filter3

export default {
 search: function(query) {
   return axios.get(BASEURL + query);
 }
 };
state = {
  labels: [],
  results: [],
  contracts: [],
  search: "",

};

loadContracts = (query) => {
  API.search(query)
  .then(res => {
    const contracts = res.data;
    this.setState({ contracts })
  })
  .catch(err => console.log(err));
};
handleInputChange = event => {
  const name = event.target.name;
  const value = event.target.value;
  this.setState({
    [name]: value
  });
};

handleFormSubmit = event => {
  event.preventDefault();
  this.loadContracts(this.state.search);
};

这是我渲染的地方。

           <Input  
            onChange={props.handleInputChange}
            value={props.search}
            type="text" 
            className={"form-control mb-2 mr-sm-2"} 
            id={label.DataField}
           />

我得到的错误是“ val（）为空”。当我使用ref代替id时，我得到“功能组件不能具有refs”

Answer 1

您应使用state处理filters values。因此您必须添加一个名为componentDidMount的方法，在此组件中，您可以初始化元素的值。我认为您的问题是在组件准备就绪后就可以获取值。

首先，您必须将两个属性添加到初始状态：

state = {
  labels: [],
  results: [],
  contracts: [],
  search: "",
  filters: [],
  isReady: false,
};

然后，您必须初始化此值，因此在进行ajax调用时，请确保状态中具有这些值。

然后在componentDidMount中进行调用。


initializeFilters = () => {

  const filter1 = document.getElementById("IDXT001").val();
  const filter2 = document.getElementById("IDXT002").val();
  const filter3 = document.getElementById("IDXT003").val();

  this.setState({ 
     filters: [filter1, filter2, filter3], 
     isReady: true
   });
}

componentDidMount(){
  initializeFilters();
}

所以在您的ajax中，您可能会遇到类似这样的情况：


    var queryURL = "http://api/ixmasterdocument?filter=idxt001|" + this.state.filter[0] + "&filter=idxt002|" + this.state.filter[1] + "&filter=idxt003|" + this.state.filters[2];

$.ajax({
      url: queryURL,
      method: "GET"
    }).then(data => {
        document.getElementById("test").innerHTML = data.map(function(contracts) {
          return contracts.Fields.map(function(docs) {
            return "<p>" + docs.DisplayName + ": " + docs.DataValue + "</p>";
          }).join("<br/>");

Answer 2

您不需要document.getElementById或refs来访问表单值。您应该将所有值存储在状态中。这样，您将可以通过this.state访问它们。

如果您需要通过Ajax请求初始化任何值。您应该在componentDidMount生命周期中这样做。

看看他们如何在React docs中编写表单：https://reactjs.org/docs/forms.html

此外，我没有看到函数或类被声明，也没有看到您在提供的代码片段中完全导入React。那肯定应该在那里。

如何从要搜索的表单中的多个ID中获取值以用于axios调用

2 个答案: