Как получить значение из нескольких идентификаторов в форме поиска для использования в вызове axios

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/>");

Попытка создать то же самое в реакции ..

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, я получаю «Компоненты функций не могут иметь ссылки»

Answer 1

Вам не нужны document.getElementById или refs для доступа к значениям формы. Вы должны хранить все свои ценности в состоянии. Таким образом, вы сможете получить к ним доступ через this.state.

Если вам нужно инициализировать какие-либо значения с помощью Ajax-запроса. Вы должны сделать это в жизненном цикле componentDidMount.

Посмотрите, как они пишут формы в документах React: https://reactjs.org/docs/forms.html

Кроме того, я не вижу объявляемой функции или класса и вообще не вижу, как вы импортируете React в предоставленных вами фрагментах кода. Это определенно должно быть там.

Answer 2

Вы должны использовать 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/>");