React-select не отправляется в полезной нагрузке запроса

Я использую react-select с react-bootstrap, но он не отправляет выбранные параметры в select в полезную нагрузку запроса, он отправляет только первые два ввода

Я пробовал много реквизитов, как вы можете видеть в коде, но когда я проверяю полезную нагрузку запроса, он не отправляет выбор

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Form from 'react-bootstrap/Form'
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Button from 'react-bootstrap/Button'
import Select from 'react-select'

export default class CreateMembro extends Component {

  constructor(props) {
    super(props)
    this.state = {mem_nome: '', mem_data_nascimento: '', selectedOption: null, opcoes: []}

    this.handleFormInput = this.handleFormInput.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }

  getHostName() {
    return `http://${window.location.hostname}`
  }


  componentDidMount() {

    axios.get(`${this.getHostName()}/get-all-ministerios`).then((res) => {

      let response = []

      res.data.map(r => {
        r.value = r.min_nome
        r.label = r.min_descricao

        delete r.min_nome
        delete r.min_descricao
        delete r.min_id
        delete r.created_at
        delete r.updated_at
        response.push(r);
      })

      this.setState({ opcoes: response})
    })
  }

    handleChange(selectedOption) {
     this.setState({ selectedOption });
     console.log(selectedOption)
    }

    handleSubmit(event) {
    event.preventDefault()

    const dataForm = {
      mem_nome : this.state.mem_nome,
      mem_data_nascimento : this.state.mem_data_nascimento
    }

    axios.post(`${this.getHostName()}/membros`, dataForm).then((response) => {
      console.log(response.data)
    }).catch((error)=>{
       console.log(error)
    })
  }

  handleFormInput(event) {
    this.setState({
      [event.target.id]: event.target.value
    })

    console.log(event.target.id+'--'+event.target.value)
  }

    render() {
        return (
          <Container>
            <Row>
              <Col md={6}>
                <Form onSubmit={this.handleSubmit}>
                  <Form.Group>
                    <Form.Label>Nome do Membro</Form.Label>
                    <Form.Control id="mem_nome" type="text" placeholder="Nome do Membro" onChange={value = handleFormInput(value)} />

                    <Form.Label>Data de Nascimento</Form.Label>
                    <Form.Control id="mem_data_nascimento" type="date" placeholder="Data de Nascimento" onChange={value = handleFormInput(value)}/>

                    <Form.Label >Ministérios</Form.Label>


                      <Select
                        id="minid"
                        name="asdasd89NAMEEE"
                        ref="refsid"
                        inputId={"minresss"}
                        inputId="ministerios"
                        controlId="sdasd78gd"
                        isMulti={true}
                        labelKey="labelkeu"
                        isSearchable={true}
                        value={this.state.selectedOption}
                        onChange={value = handleChange(value)}
                        options={this.state.opcoes}
                        placeholder="Selecione o(s) ministério(s)">

                      </Select>



                  </Form.Group>
                  <Button type="submit" variant="primary">
                    Enviar
                  </Button>
                </Form>
              </Col>
            </Row>
          </Container>
        );
    }
}

Я ожидаю, что выбранные значения попадут в полезную нагрузку запроса.

enter image description here

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
0
409
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я использую ту же библиотеку, что и вы, поэтому вы можете взглянуть на мой код.

Я думаю, что ваш код должен быть изменен на что-то вроде этого

измениться от этого

 onChange={value = handleChange(value)}

к этому

onChange={value => handleChange(value)}

а также

const dataForm = {
      mem_nome : this.state.mem_nome,
      mem_data_nascimento : this.state.mem_data_nascimento,
      selectedOption: this.state.selectedOption  // you missing this
    }

Спасибо, но это не означает, что выбор переходит в полезную нагрузку запроса, у меня уже есть функция для обработки отправки, я обновлю код по вопросу

Diego Felipe 22.05.2019 16:49

Можете ли вы сделать снимок экрана, как ваш запрос отправляется на вкладке сети?

Tony Ngo 22.05.2019 16:56

Я только что это сделал :)

Diego Felipe 22.05.2019 16:59

Я вижу, ваш код onChange={value = handleChange(value)}, это опечатка?

Tony Ngo 22.05.2019 17:03

Я изменился, чтобы проверить, может ли ваш ответ заставить его работать, но это было: onChange={this.handleChange}

Diego Felipe 22.05.2019 17:06

Проверьте мой ответ еще раз, вам не хватает selectedOption в вашем объекте dataForm: D

Tony Ngo 22.05.2019 17:07

Большое спасибо, это была проблема, я забыл добавить состояние в форму данных :)

Diego Felipe 22.05.2019 18:04

Другие вопросы по теме