Question

我正在使用带有react-bootstrap的react-select，但是它不会将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
    }

未在请求有效负载中发送React-select

1 个答案: