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

Question

Я использую реагирование-выбор с реакцией-начальной загрузкой, но оно не отправляет выбранные опции выбора в полезную нагрузку запроса, оно только отправляет первые два ввода

Я пробовал много реквизитов, как вы можете видеть в коде, но когда я проверяю полезную нагрузку запроса, он не отправляет 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>
        );
    }
}

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

Answer 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
    }