javascript - 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>
);
}
}
我希望选择值进入请求有效负载。
解决方案
我正在使用与您相同的库,因此您可以查看我的代码
我认为您的代码应该更改为这样的
从此改变
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
}
推荐阅读
- python - 如何从 __init__ 中启动类函数 - 设置 kivy 标签文本
- javascript - 网址重定向将“localhost”添加到网址前面
- c++ - 将命令从 Raspberry PI 发送到 arduino,反之则使用 C++
- java - IllegalStateException:应为 BEGIN_OBJECT,但在使用 Retrofit 2 时为 BEGIN_ARRAY
- asp.net-core - Identity Server 脚手架和 Blazor WebAssembly
- google-apps-script - 无论您使用 Apps Scipt 在哪个页面上,有没有办法让 UI 输入框以指定的时间间隔弹出?
- google-analytics - Google Analytics 4 事件参数
- python - 熊猫 DataFrame 的 Modin 与线程
- python - Pandas 列表列,为每个列表附加一个新列
- c# - c# RegEx 匹配在哪一行。林克?