Как получить входное значение с помощью "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>
)
}
}