reactjs - limpiar - reset component react

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

Question

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:

`

Answer 1

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

Answer 2

Creo que lo que sugiere usar es el atributo de devolución de llamada ref , así que solo cambia inputRef a ref .

Para su información: https://facebook.github.io/react/docs/refs-and-the-dom.html

Answer 3

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.

Answer 4

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