如何使用react-bootstrap形式的"refs"获取输入值？

Question

我正在尝试创建一个以模态显示的表单.因此,当用户输入值时,该值存储在本地存储中.这是一张帮助您了解我的意思的图片:
这是表单的代码:

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教程中所读到的,我应该添加
<FormControl inputRef={ref => { this.input = ref; }} /> 到FormControl道具中.但添加它后,我调用模态窗体时出错:

`

Answer 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

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

然后你可以通过以下方式获得书名和作者的名字价值:

this.inputName.value and this.inputAuthor.value

Answer 3

这个问题（或更像是工作方式的改变）与React-Bootstrap有关。您执行此操作的方式将不再起作用。

该<FormControl>组件直接呈现或其他指定的组件。如果您需要访问不受控制的值<FormControl>，附加裁判它，你会与不受控制的输入，然后调用ReactDOM.findDOMNode(ref)来获得DOM节点。然后，您可以与该节点进行交互，就像与其他任何不受控制的输入一样。

这是一个例子：

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问题。

Answer 4

我认为它建议使用的是ref 回调属性，所以只需更改inputRef为ref.

仅供参考：https://facebook.github.io/react/docs/refs-and-the-dom.html