2

Buen día tengo un input en react asi:

onInputChange (e) {
    this.setState({ name: e.target.value });
    this.setState({ inputValue: e.target.value });
  }

<div className='input-field col s12 m4 l4 '>
   <input value={this.state.inputValue} onChange={this.onInputChange.bind(this)} name="cliente" type="text" className='validate'></input>
   <label  >Cliente</label>
</div>

Tambien un componente (nieto) que tiene un boton que copia un id de la siguiente manera:

onChange  ({target: {inputValue}}) {
    this.setState({inputValue, copied: false});
  };

onClick ({target: {innerHTML}}) {
   console.log(`Clicked on "${innerHTML}"!`);
   Materialize.toast('Id Copied!', 2000);
};

onCopy (text) {
    this.setState({copied: true});
    this.setState({ inputValue: text });
  };

<CopyToClipboard
  onCopy={this.onCopy}
  text={item.iddef_cliente}>
  <a className="btn-flat shadow btn-small waves-effect waves-light" onClick={this.onClick} onChange={this.idcopy}><i className="material-icons">content_copy</i></a>
</CopyToClipboard>

lo que quiero hacer es que el id que se copia en el componente se pegue automaticamente en el input. Espero me puedan ayudar.

1 respuesta 1

3

No es muy complicado lo que quieres hacer, para eso puedes definir un valor para tu campo en tu estado, y luego asignarlo al input que deseas. De la siguiente forma:

// donde defines tu state, normalmente en el constructor
this.state = {
   ...
   inputValue: '',
   ...
}

Ahora en tu input, debes hacer un bind de ese valor:

<input value={this.state.inputValue} onChange={this.onInputChange.bind(this)} name="cliente" type="text" className='validate' />

Importante, modificar el método onInputChange para que pueda servir correctamente:

onInputChange(event) {
    ...  // estos tres puntos representan la lógica que ya tienes en este método
    this.setState({ inputValue: event.target.value });  // guardamos en el state el valor del evento (lo que el usuario escribe);
}

Y ahora modificamos el método onCopy para que modifique ese estado también:

onCopy(text) {
  ...  // estos tres puntos representan la lógica que ya tienes en este método
  this.setState({ inputValue: text });  // esta linea hace la magia
}

Con eso debe ser suficiente, cualquier duda, o error, puedes comentarme y con gusto te ayudaré

12
  • Hola lamento molestar de nuevo pero sale un error Uncaught ReferenceError: text is not defined Commented el 9 abr. 2019 a las 17:54
  • Seguramente no te has fijado bien en el código, pero si ves en onCopy recibe como parámetro una variable llamada text por eso sale así: onCopy(text) si no tienes nada adentro para recibir es decir, tu línea es igual a esto onCopy() entonces agregale el text y si ya tienes alguna otra entonces cambia text por la primera opción que tengas como parámetro de onCopy Commented el 9 abr. 2019 a las 18:27
  • Es correcto no habia modificado esa parte, aun asi no funciona, no se pega en el input el valor copiado no me marca ningun error pero no realiza la funcion. Commented el 9 abr. 2019 a las 19:37
  • Puedes actualizar tu pregunta con lo que llevas de código hasta ahora? incluyendo los métodos: onCopy y onInputChange Commented el 9 abr. 2019 a las 19:38
  • Ya agregue la actualizacion del codigo veo que en consola en el input no me da valor alguno en consola Commented el 9 abr. 2019 a las 19:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.