react limpiar formulario component clean reactjs react-bootstrap

reactjs - limpiar - reset component react



¿Cómo obtener un valor de entrada usando "refs" en la forma react-bootstrap? (4)

Acabo de hacer este problema. Mi código:

<FormControl componentClass="input" placeholder="Enter recipe title" inputRef={(ref) => {this.input = ref}} defaultValue={title}/> </FormGroup>

Y luego puede obtener el valor de <FormControl> en algún controlador como este:

console.log(this.input.value);

Los detalles se pueden encontrar en mi repositorio: https://github.com/kerf007/recipebook

Estoy tratando de crear un formulario que aparece en modal. Entonces, cuando el usuario ingresa un valor, ese valor se almacena en el almacenamiento local. Aquí hay una foto que te ayuda a entender lo que quiero decir:
Aquí está el código del formulario:

function FieldGroup({id, label, help, ...props}) { return ( <ReactBootstrap.FormGroup controlId={id}> <ReactBootstrap.ControlLabel>{label}</ReactBootstrap.ControlLabel> <ReactBootstrap.FormControl {...props} /> {help && <ReactBootstrap.HelpBlock>{help}</ReactBootstrap.HelpBlock>} </ReactBootstrap.FormGroup> ); } const formInstance = ( <form> <FieldGroup id="formControlsText" type="text" label="Text" placeholder="Recipe Name" inputRef={ref => { this.input = ref; }} /> <ReactBootstrap.FormGroup controlId="formControlsTextarea"> <ReactBootstrap.ControlLabel>Ingredients</ReactBootstrap.ControlLabel> <ReactBootstrap.FormControl componentClass="textarea" placeholder="Enter Ingredients" /> </ReactBootstrap.FormGroup> </form> );

Como he leído en el tutorial de Bootstrap React, debo agregar
<FormControl inputRef={ref => { this.input = ref; }} /> <FormControl inputRef={ref => { this.input = ref; }} /> a los apoyos de FormControl. Pero después de agregarlo, aparece un error cuando se invoca el formulario modal:

`



Este problema (o más como un cambio en la forma en que funciona) está relacionado con React-Bootstrap. La forma en que lo haces ya no funcionará.

El componente <FormControl> representa directamente el u otro componente especificado. Si necesita acceder al valor de un <FormControl> no <FormControl> , adjúntele una referencia como lo haría con una entrada no controlada, luego llame a ReactDOM.findDOMNode(ref) para obtener el nodo DOM . Luego, puede interactuar con ese nodo como lo haría con cualquier otra entrada no controlada.

Aquí hay un ejemplo:

var React = require(''react''); var ReactDOM = require(''react-dom''); var FormControl = require(''react-bootstrap'').FormControl; React.createClass({ render: function() { return (<FormControl ref="formControl" />); }, getFormControlNode: function() { // Get the underlying <input> DOM element return ReactDOM.findDOMNode(this.refs.formControl); } });

Tan pronto como obtenga el elemento DOM, podrá recuperar el valor: this.getFormControlNode().value o hacer cualquier otra cosa que desee.

PD: Aquí hay un tema relacionado con github sobre este tema.


Tengo el mismo problema contigo, y esta es mi solución.

const FieldGroup = ({id, label, help, inputRef, ...props}) => <FormGroup controlId={id}> <ControlLabel>{label}</ControlLabel> <FormControl {...props} inputRef={inputRef}/> {help && <HelpBlock>{help}</HelpBlock>} </FormGroup>

y mi forma

<form> <FieldGroup id="bookName" type="text" label="Name" placeholder="Enter name..." inputRef = {(input) => this.inputName = input } /> <FieldGroup id="bookAuthor" label="Author" type="text" placeholder="author ''s name..." inputRef={(input) => this.inputAuthor = input} /> </form>

luego puede obtener el nombre del libro y el valor del nombre del autor al:

this.inputName.value and this.inputAuthor.value