web-dev-qa-db-fra.com

Comment obtenir une valeur d'entrée en utilisant "refs" sous la forme react-bootstrap?

J'essaie de créer un formulaire qui apparaît en modal. Ainsi, lorsque l'utilisateur entre une valeur, cette valeur est stockée dans la mémoire de stockage locale. Voici une image qui vous aide à comprendre ce que je veux dire:
enter image description here Voici le code de la forme:

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>
);

Comme je l'ai lu dans bootstrap React tutoriel, je devrais ajouter
<FormControl inputRef={ref => { this.input = ref; }} /> aux accessoires FormControl. Mais après l'avoir ajouté, une erreur survient lorsque la forme modale est invoquée:

` enter image description here

reactjsreact-bootstrap
23
Taras Yaremkiv

Je viens de faire ce problème. Mon code:

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

Et alors vous pouvez obtenir la valeur de <FormControl> dans un gestionnaire comme celui-ci:

console.log(this.input.value);

Les détails peuvent être trouvés dans mon référentiel: https://github.com/kerf007/recipebook

27
Eugene Kulakov

J'ai le même problème avec toi, et c'est ma solution

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

et ma forme

<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>

alors vous pouvez obtenir le nom du livre et le nom de l'auteur par:

this.inputName.value and this.inputAuthor.value
8
M.Tae

Ce problème (ou plutôt un changement dans son fonctionnement) est lié à React-Bootstrap. La façon dont vous le faites ne fonctionnera plus.

Le composant <FormControl> Rend directement le ou les autres composants spécifiés. Si vous avez besoin d'accéder à la valeur d'un <FormControl> Non contrôlé, y attacher une référence comme vous le feriez avec une entrée non contrôlée, appelez ReactDOM.findDOMNode(ref) pour obtenir le nœud DOM . Vous pouvez ensuite interagir avec ce nœud comme vous le feriez avec toute autre entrée non contrôlée.

Voici un exemple:

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);
  }
});

Dès que vous obtenez l'élément DOM, vous pourrez récupérer la valeur: this.getFormControlNode().value ou faire tout ce que vous voulez.

PS: Voici un problème lié au github sur ce sujet.

4
Kaloyan Kosev

Je pense que ce qu'il suggère d'utiliser est l'attribut ref callback , il suffit donc de changer inputRef en ref.

Pour votre information: https://facebook.github.io/react/docs/refs-and-the-dom.html

2
BryceSi

Bonjour cette solution a fonctionné pour moi!

<Form
  noValidate
  validated={validated}
  onSubmit={(e) => this.handleSubmit(e)}
  style={{ width: '100%' }}
>
  <Form.Group controlId="formBasicEmail">
   <Form.Label>Email address</Form.Label>
   <Form.Control type="email" placeholder="Enter email" inputRef={(ref) => { this.email = ref }} required />
   <Form.Text className="text-muted"> Well never share your email with anyone else.
   </Form.Text>
  </Form.Group>
</Form>

handleSubmit(event) {
    console.log(event.target.elements.formBasicPassword.value)
}
0
Yakup Ad

Cela a fonctionné pour moi en utilisant https://reactjs.org/docs/refs-and-the-dom.html

 constructor(props) {
        super(props);
        this.email = React.createRef();
    }

submit() {
        var email = this.email.current.value;
        console.log(email);
}
render() {
   return (
            <Form>
            <Form.Control type="email" placeholder="Your email" ref={this.email} />
            <Button variant="primary" onClick={()=>this.submit()}>Send</Button>
            </Form>
           );
}
0
Steven Luong C