Как получить входное значение с помощью "refs" в форме реакции-бутстрапа?

Я пытаюсь создать форму, которая появляется в модальной форме. Поэтому, когда пользователь вводит значение, это значение сохраняется в локальном хранилище. Вот картина, которая поможет вам понять, что я имею в виду:
Вот код формы:

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

Как я прочитал в учебном руководстве по перезагрузке, я должен добавить <FormControl inputRef={ref => { this.input = ref; }} /> к реквизитам FormControl. Но после его добавления я получаю сообщение об ошибке при использовании модальной формы:

Ответ 1

Я только что сделал эту проблему. Мой код:

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

И тогда вы можете получить значение от <FormControl> в некотором обработчике, например:

console.log(this.input.value);

Подробности можно найти в моем репо: https://github.com/kerf007/recipebook

Ответ 2

У меня с вами такая же проблема, и это мое решение

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

и моя форма

<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  name..."
        inputRef={(input) => this.inputAuthor = input}
     />
</form>

то вы можете получить имя книги и имя имени автора:

this.inputName.value and this.inputAuthor.value

Ответ 3

Эта проблема (или больше похоже на изменение способа ее работы) связана с React-Bootstrap. То, как вы это делаете, больше не будет работать.

Компонент <FormControl> напрямую отображает тот или иной указанный компонент. Если вам нужно получить доступ к значению неконтролируемого <FormControl>, привязать его к нему так же, как и к неконтролируемому вводу, а затем вызвать ReactDOM.findDOMNode(ref), чтобы получить DOM node. Затем вы можете взаимодействовать с этим node, как и с любым другим неконтролируемым вводом.

Вот пример:

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

Как только вы получите элемент DOM, вы сможете получить значение: this.getFormControlNode().value или сделать что-либо еще, что вы хотите.

PS: Здесь связанная проблема github по этой теме.

Ответ 4

Я думаю, что он предлагает использовать атрибут обратного вызова ref, поэтому просто измените inputRef на ref.

FYI: https://facebook.github.io/react/docs/refs-and-the-dom.html

Ответ 5

Здравствуйте, это решение сработало для меня!

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

Ответ 6

Это сработало для меня, используя 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>
           );
}

Ответ 7

Я думаю, что нашел, как получить ref из React-Bootstrap <Form/>.

 import React, {createRef} from 'react'  

    interface definedProps {} 
    interface definedState {
                  myRef: Object //I didn't found the more accurate type
              } 
    export default class SomeClass extends React.Component<definedProps,definedState> {
        state = {
            myRef: React.createRef<Form<any>>() //That it!
        }

    const handleClose = () => {
        console.log('this.state.myRef: ', this.state.myRef); //Here we can take data from Form
        debugger; //todo: remove
    }

        render() {

            return (
                <div>
                     <Form ref={this.state.myRef}> { /*Here we're connecting the form ref to State*/}
                        <Form.Group controlId='formName'>
                            <Form.Control
                                type='text'
                                placeholder='Enter Name'
                            />
                        </Form.Group>
                          ...
                        <Button
                            variant='primary'
                            onClick={handleClose}
                            >
                            Save Changes
                        </Button>
                        </Form>
                </div>
            )
        }
    }