Picking up input number text in Reactjs

Question

Hello, I need to pick up the typed text within two input’s number at the moment I click 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 are 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 at Reactjs can help me?

Answer 1

Don’t forget that React JS is javascript

//import React from 'react';

class Formulario extends React.Component 
{
  //fat arrow functions não precisam de dar o .bind
  handlePesquisar = () => {   
    //se quiser um inteiro
    //let numero1 = parseInt(document.querySelector(".numero1").value);
    //let numero2 = parseInt(document.querySelector(".numero2").value);
    
    let numero1 = document.querySelector(".numero1").value;
    let numero2 = document.querySelector(".numero2").value;
    let obj = {
      numero1,
      numero2
    };

    alert(JSON.stringify(obj, null, 2));
  }

  render() {
      return (
          <div>
            <input className={"numero1"}/>
            <input className={"numero2"}/>
            <button onClick={this.handlePesquisar}> Pesquisar </button>
          </div>
      );
  }
}

ReactDOM.render(<Formulario/>, document.querySelector(".root"));

<div class="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>