Tenho a classe cadastroEtapa que basicamente é uma tela de formulário que possui um campo select que esta componetizado em um outro arquivo LinhaFormSelect , estou passando a funçao selectLinhaListner que esta em cadastroEtapa para o componente LinhaFormSelect através de props que é responsável por gerar a lista de opções com informações vindas do banco de dados. O problema é que quando eu seleciono a opção ele deveria disparar o evento onSelect do e chamar a função passada por atributo , porem a função nunca é chamada.
import React, { Fragment } from 'react'
import { Button, Form, Container } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import MenuBar from './MenuBar';
import ScqApi from '../Http/ScqApi';
import LinhaFormSelect from '../Components/LinhaFormSelect';
class CadastroEtapa extends React.Component {
constructor(props){
super(props)
this.state = {
linhas : [],
linhaId : '',
nome : '',
posicao : ''
}
}
componentDidMount(){
ScqApi.ListaLinhas().then(res => {
console.log(res)
this.setState({
linhas : [...this.state.linhas, ...res]
})})
}
selectedLinhaListner = (id) => {
this.setState({
linhaId : id
})
console.log(this.state.linhaId)
}
render() {
return (
<Fragment>
<header>
<MenuBar></MenuBar>
</header>
<body>
<div>
<Container style={{ marginTop: 20 }}>
<Form>
<LinhaFormSelect op={this.state.linhas} onSelection={this.selectedLinhaListner} ></LinhaFormSelect>
<Form.Group controlId="nomeEtapaForm">
<Form.Label>Nome Etapa: </Form.Label>
<Form.Control type="text" placeholder="Nome da Etapa" />
</Form.Group>
<Form.Group controlId="posicaoEtapaForm">
<Form.Label>Posição: </Form.Label>
<Form.Control type="number" min="0" placeholder="Numero do Tanque" />
</Form.Group>
<Form.Group>
<Button style={{ margin: 2 }} variant="primary" type="submit">Editar</Button>
<Button style={{ margin: 2 }} variant="primary" type="submit">Salvar</Button>
</Form.Group>
</Form>
</Container>
</div>
</body>
</Fragment>
)
}
}
export default CadastroEtapaimport React, { Component } from 'react'
import {Form} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
class LinhaFormSelect extends Component{
state = {
selection : ''
}
render(){
const {op, onSelection} = this.props
const options = op.map((linha,index) =>{
return <option value={linha} key={linha.id} onClick={() => {onSelection(linha.id)}}>{linha.nome}</option>
})
return (
<Form.Group controlId="linhaSelectOptions">
<Form.Label>Escolha uma Linha</Form.Label>
<Form.Control as="select" >
{[options]}
</Form.Control>
</Form.Group>
)
}
}
export default LinhaFormSelect