如何使用“refs"获取输入值以反应引导形式? [英] How to get an input value using "refs" in react-bootstrap form?
问题描述
我正在尝试创建一个以模态显示的表单.因此,当用户输入一个值时,该值存储在本地存储中.这是一张可以帮助您理解我的意思的图片:
这是表单的代码:
I'm trying to create a form that appears in modal. So when user input a value, that value is stored in local storage. Here's a picture that help's you to understand what I mean:
Here is the code of the form:
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>
);
正如我在 bootstrap React 教程中所读到的,我应该添加
<代码>
As I've read in bootstrap React tutorial, I should add
<FormControl inputRef={ref => { this.input = ref; }} />
to the FormControl props. But after adding it I get an error when modal form is invoked:
`
推荐答案
我刚刚提出了这个问题.我的代码:
I just made this issue. My code:
<FormControl
componentClass="input"
placeholder="Enter recipe title"
inputRef={(ref) => {this.input = ref}}
defaultValue={title}/>
</FormGroup>
然后你可以在这样的处理程序中从
获取值:
And then you can get the value from <FormControl>
in some handler like this:
console.log(this.input.value);
详细信息可以在我的 repo 中找到:https://github.com/kerf007/recipebook
Details can be found in my repo: https://github.com/kerf007/recipebook
这篇关于如何使用“refs"获取输入值以反应引导形式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!