Input does not allow typing

Question

I have a page with some inputs, I’m using React so I have some components to help when I create the form

Form Code:

<div className="content novo">
    <Alerta ref={(ref)=>this.alerta = ref} />
    <Form id='testeForm' action={this.props.editando == false ? _P_URL_ + 'cliente/gravar_cadastro' : _P_URL_ + 'cliente/editar_cadastro'} erro={erro => this.erro(erro)} ok={ok => this.props.onSubmit()}>
      <h3 className="nova_titulo">Novo</h3>
      <hr/>
      <Row>
        <Input value={this.state.nome} label="*Nome" nome="nome" md="3" />
        <InputCpf value={this.state.cpf} label="*CPF" id="cpf" nome="cpf" md="3" />
        <InputData value={this.state.data} label="Data de nascimento" nome="nascimento" md="3" />
        <Input value={this.state.rg} label="RG" nome="rg" md="3" />
      </Row>
      <Row>
        <InputPhone value={this.state.telefone} label="*Telefone" nome="telefone" md="6"/>
        <Input value={this.state.email} label="E-mail" nome="email" md="6" />
      </Row>
      <h4 className="titulo">Endereço</h4>
      <hr/>
      <Endereco editando={this.props.editando} preencherModal={this.props.preencherModal}/>
      {this.props.editando == true &&
        <ButtonSubmitForm><i className="fa fa-check"/> Salvar</ButtonSubmitForm>
      }
      {this.props.editando == false &&
        <ButtonSubmitForm><i className="fa fa-check"/> Gravar</ButtonSubmitForm>
      }
    </Form>
  </div>

The components <Input/> and <InputData/> do not allow me to write or paste a value (I can click on the field), the rest of the inputs work normally.

Code of <Input />:

            <Col lg={this.props.lg} md={this.props.md} sm={this.props.sm} xs={this.props.xs}>
            <label htmlFor={this.id}>{this.props.label}</label>
            <input type="text"
                className={"form-control " + this.props.customClassComponent}
                name={this.props.nome}
                id={this.id}
                onChange = {input => this.onChange(input)}
                onBlur={blur => this.onBlur(blur)}
                value={this.props.value}
                disabled={this.props.disabled}
                readOnly={this.props.readOnly}

                />
        </Col>

If you need any more code, please let me know.

Answer 1

I was able to solve, instead of using value in the Component, replace with defaultValue

Before:

<input type="text"
           ...
            value={this.props.value}
            ...
/>

Now:

<input type="text"
           ...
            defaultValue={this.props.value}
            ...
/>