Как отобразить все входы в определенном компоненте в реакции

Question

Я хочу иметь возможность сопоставлять все компоненты с тем, чтобы я мог использовать входные данные в качестве средства добавления по запросу API. Я пытался задать похожие вопросы безрезультатно. Вот метод, который, я считаю, можно использовать. Нужно ли как-то добавлять входы в состояние, прежде чем я смогу отобразить его?

handleInputChange = event => {
  const name = event.target.name;
  const value = event.target.value;
  const id = event.target.id;
  this.setState({
    [name]: value,
    [id]: ""
  });
};


handleFormSubmit = event => {
  this.loadContracts(this.state.search);
event.preventDefault();
var query = '';
('Input').map(function(){
  if (query != '')
  query += '&';
  query += 'filter=' + this.id + this.name;
})

search: function(query) {return axios.get("http://api/documents?" + query);
  }

В дескрипторе Изменение ввода я добавил const id. Это захватывает идентификатор от меня?

затем в дескрипторе формы отправки я пытаюсь сопоставить через ввод, чтобы добавить к пустому запросу данные, введенные пользователем.

API должен выглядеть следующим образом после его завершения.

http://api/documents?filter=idxt001|1111&filter=idxt004|Pedestrian

Кроме того, здесь ввод, который я хочу отобразить.

  <form className="form-inline ">

      {props.labels.map(label => (
      <div className="card border-0 mx-auto" style={styles} key={label.Id}>
        <ul className="list-inline ">
      <span>
        <li>
        <Labels  htmlFor={label.DisplayName} >{label.DisplayName}:</Labels>
        </li>
        <li >
          <Input  
            onChange={props.handleInputChange}
            value={props.search}
            name="search"
            type="text" 
            className={"form-control mb-2 mr-sm-2"} 
            id={label.DataField}
          />
        </li> 
      </span>
  </ul>
</div>
  ))}

 <div className=" col-sm-12">
  <button
    style={{ float: "left", marginBottom: 10, marginLeft: 36 }} 
    className="btn btn-success"
    type="submit"
    onClick={props.handleFormSubmit}
  >
    Search
  </button>
 </div>
</form>

EDIT обновлен код, отражающий ответ @Tyro.

 class SearchPage extends React.Component {

state = {
  labels: [],
  results: [],
  contracts: [],
  search: "",
  formValues: {
    [DataField1]: value1,
    [DataField2]: value2,
    [DataField3]: value3
   }

};


componentDidMount(){
  this.loadLabels()

}

loadLabels = () => {
  API.getLabels()
    .then(res => {
      const labels = res.data;
      console.log(labels)
        this.setState({ labels })
    })
    .catch(err => console.log(err));
};

loadContracts = (query) => {
  API.search(query)
  .then(res => {
    const contracts = res.data;
    console.log(contracts)
    this.setState({ contracts })
  })
  .catch(err => console.log(err));
};

handleInputChange(key, value) {
  const name = event.target.name;
  const value = event.target.value;
  this.setState({
    [name]: value,
  });
};


handleFormSubmit = event => {
  this.loadContracts(this.state.search);
event.preventDefault();
let query = '';
const formData = this.state.formValues
let keys = Object.keys(formData);
keys.forEach(k => {
  query += `${k}=${formData[k]}`
 })

};

И форма ..

const SearchForm = props => (

  <form className="form-inline ">

{props.labels.map(label => (
  <div className="card border-0 mx-auto" style={styles} key={label.Id}>
    <ul className="list-inline ">
       <span>
        <li>
          <Labels  htmlFor={label.DisplayName} >{label.DisplayName} : 
         </Labels>
        </li>
        <li >
          <Input  
          key={label.Id}
            onChange={(e) => {
              console.log(label.DataField, e.target.value);
              props.handleInputChange(label.DataField, e.target.value)}}
            value={props.search}
            name="search"
            type="text" 
            className={"form-control mb-2 mr-sm-2"} 
            id={label.DataField}
          />
        </li> 
      </span>
  </ul>
 </div>
))}

<div className=" col-sm-12">
 <button
    style={{ float: "left", marginBottom: 10, marginLeft: 36 }} 
    className="btn btn-success"
    type="submit"
    onClick={props.handleFormSubmit}
  >
    Search
  </button>


 </div>
 </form>

Текущие ошибки в форме Значения в состоянии

./src/components/Form.js
Line 18:  'DataField1' is not defined  no-undef
Line 18:  'value1' is not defined      no-undef
Line 19:  'DataField2' is not defined  no-undef
Line 19:  'value2' is not defined      no-undef
Line 20:  'DataField3' is not defined  no-undef
Line 20:  'value3' is not defined      no-undef

Answer 1

Ваша проблема, во-первых, в том, что у вас нет правильного хранения входных значений формы в вашем состоянии (и структурированных, чтобы вы могли легко зацикливаться на них), я бы посоветовал вам установить ваше состояние следующим образом:

{
  formValues: {
   [DataField1]: value1,
   [DataField2]: value2,
   [DataField3]: value3
  }
}

1. Выполните рефакторинг обработчика изменений ввода, чтобы он правильно ссылался на отдельное поле (используя DataField, если он уникален).Теперь вы можете хранить каждое входное значение с его идентификатором или ключом, я бы предложил:

РЕДАКТИРОВАТЬ

<Input
   onChange={(e) => {
     /* log label.DataField and e.target.value,
        do you get the values?
        It should be the values we are interested in, and not 
        undefined, if it is look for the documentation of Input,
        especially on how to get the new values after onChange event */

     console.log(label.DataField, e.target.value);


     props.handleInputChange(label.DataField, e.target.value)
   }}
>

принять к сведению значение onChange,это функция (которая будет вызвана позже, как только будет запущено событие onChange), и она связана с соответствующим ID поля ввода

/* key and value corresponds to #1 label.DataField and e.target.value
so it should be defined. This is where you set the state */

2.) рефакторинг handleInputChange(key, value) { ... }, так что он будет хранить нужные значенияв вашем состоянии

3.) Наконец, итерируйте его и передайте в ваш API:

let query = '';
const formData = this.state.formValues
let keys = Object.keys(formData);
keys.forEach(k => {
  query += `${k}=${formData[k]}`
})
...