Функция для управления несколькими переключателями управления в React / Typescript

Question

То, что я пытаюсь сделать, это отправить запрос на отправку управления несколькими коммутаторами, однако я думаю, что это должен быть более простой способ отправки запросов, а не индивидуальная запись запроса для каждого входа коммутатора. Как я могу объединить или написать функцию, которая может сделать это чисто? Используя Typescript / React. Вопрос обновлен ниже:

UPDATE: What I want to do is send the state of the switch input control as a toggle. ie. when the switch control is set to yes/no, then it sends a post request to the server

    interface IState {
  checkedA?: boolean;
  checkedB?: boolean;
}

  public render() {
const {} = this.state;

 <div className={classes.switchContainer}>
                <FormGroup row>
                    <FormControlLabel
                      control={
                        <Switch
                          checked={this.state.checkedA}
                          onChange={this.handleChange}
                          value="checkedA"
                        >Toggle</Switch>
                        }label="YES"
                        />
                  <Typography color="secondary" variant="body1" className={classes.toggleQuestions}>Question 1</Typography>
                </FormGroup>
              </div>

     <div className={classes.switchContainer}>
                    <FormGroup row>
                        <FormControlLabel
                          control={
                            <Switch
                              checked={this.state.checkedB}
                              onChange={this.handleChange}
                              value="checkedB"
                            >Toggle</Switch>
                            }label="YES"
                            />
                      <Typography color="secondary" variant="body1" className={classes.toggleQuestions}>Question 2</Typography>
                    </FormGroup>
                  </div>
)}

<Button
 onClick={this.submitRecommendation}>
Send Request</Button



 await axios.post(
      `/test/testpost`,
      {  
       post request from click of button would go in here
      } catch (err) {
}
);

Answer 1

Хорошо, вот пример того, как вы можете получить программный доступ ко входам при отправке формы:

private handleSubmit = (e: React.FormEvent): void => {
  e.preventDefault();
  // We want the form as a starting point to traverse the DOM
  const form = e.target;
  // It seems like we can be relatively sure that all the information 
  // we want is contained in the form's inputs, so we'll select them all
  const inputs = form.querySelectorAll('input');
  // With the NodeList inputs (a DOM data type), we can use .forEach 
  // to check out all the nodes by their type
  inputs.forEach(input => {
    // Accessing the name and value will give you all
    // the information you need to build up a POST request
    switch(input.type) {
      case 'checkbox':
        console.log('The checkbox is called', input.name, 'and its checked state is', input.checked);
        break;
      case 'text':
        console.log('The text input is called', input.name, 'and it says', input.value);
        break;
    }
  });
}

И вот пример того, как вы могли бы потенциально создать объект запроса в цикле .forEach, создав объект для отправки в вашем запросе. Вы можете сделать это довольно легко, если убедитесь, что используете правильное название для каждого предмета.

// in the above method
const request = {};
inputs.forEach(input => {
  // Somehow map the input name and value to your data model you're updating
  request[input.name] = input.value;
});
await axios.post(/* use request object here */);

Надеюсь, этого достаточно, чтобы начать, но не стесняйтесь комментировать, если есть какие-то конкретные детали реализации, которые вы хотели бы обсудить! : D