Hello, I need to get the typed text inside two input's number when I click on the generate serial button
I have the following structure
import React, { Component } from 'react';
import {
Grid, Row, Col,
FormGroup, ControlLabel, FormControl
} from 'react-bootstrap';
import { Card } from 'components/Card/Card.jsx';
import { FormInputs } from 'components/FormInputs/FormInputs.jsx';
import { UserCard } from 'components/UserCard/UserCard.jsx';
import Button from 'elements/CustomButton/CustomButton.jsx';
import avatar from "assets/img/faces/face-3.jpg";
import axios from 'axios';
class UserProfile extends Component {
constructor() {
super();
this.state = {
lista: [],
serial: '',
numeroContrato: '',
quantidadeDias: ''
}
};
handleChangeNumContrato(e) {
this.setState({ numeroContrato: e.target.value });
};
handleChangeQtdDias(e) {
console.log(e);
this.setState({ quantidadeDias: e.target.value });
};
handleClickPesquisar() {
};
render() {
return (
<div className="content">
<Grid fluid>
<Row>
<Col md={12}>
<Card
title="Gerador de Serial"
content={
<form>
<FormInputs
ncols={["col-md-6", "col-md-6"]}
proprieties={[
{
label: "Código do Cliente",
type: "number",
bsClass: "form-control",
placeholder: "Código do Cliente",
defaultValue: ""
},
{
label: "Quantidade de dias",
type: "number",
bsClass: "form-control",
placeholder: "Quantidade de dias",
defaultValue: ""
}
]
}
/>
<Button
bsStyle="info"
pullRight
fill
type="button"
onClick={this.handleClickPesquisar.bind(this, this.props)}>
Gerar Serial
</Button>
<div className="clearfix"></div>
<Row>
<Col md={12}>
<FormGroup controlId="formControlsTextarea">
<ControlLabel>Serial gerado:</ControlLabel>
<FormControl rows="5" componentClass="textarea" bsClass="form-control"
placeholder="Preencha os campos e clique em Gerar Serial."
value={this.state.serial}
/>
</FormGroup>
</Col>
</Row>
</form>
}
/>
</Col>
</Row>
</Grid>
</div>
);
}
}
export default UserProfile;
My components look like this:
import React, { Component } from 'react';
import { FormGroup, ControlLabel, FormControl, Row } from 'react-bootstrap';
function FieldGroup({ label, ...props }) {
return (
<FormGroup>
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} />
</FormGroup>
);
}
export class FormInputs extends Component{
render(){
var row = [];
for(var i = 0; i < this.props.ncols.length ; i++){
row.push(
<div key={i} className={this.props.ncols[i]}>
<FieldGroup
{...this.props.proprieties[i]}
/>
</div>
);
}
return (
<Row>
{row}
</Row>
);
}
}
export default FormInputs;
I'm new to ReactJs can you help me?