我正在使用 react-select 和 react-bootstrap,但它不会将 select 中的选定选项发送到请求负载,它只发送前两个输入
正如您在代码中看到的那样,我已经尝试了很多 Prop ,但是当我检查请求负载时,它没有发送选择
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>
);
}
}
我希望选择的值进入请求负载。
最佳答案
我和你用的是同一个库所以你可以看看我的代码
我认为你的代码应该改成这样
从此改变
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
}
关于javascript - React-select 未在请求负载中发送,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56257638/