如何在react-bootstrap表單中使用「refs」獲取輸入值？

我正在嘗試創建一個出現在模式中的窗體。所以當用戶輸入一個值時，該值就存儲在本地存儲器中。這裏有一個圖片，幫助的你明白我的意思：
這裏是形式的代碼：如何在react-bootstrap表單中使用「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道具。但加入之後，我得到一個錯誤調用模式窗體時：

來源

2016-12-11 Taras Yaremkiv

我想這表明使用是裁判回調屬性，所以只是改變inputRef到ref。

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

來源

2016-12-11 17:13:36 BryceSi

它不會改變任何東西，同樣的錯誤。我認爲問題在於**「您不能在功能組件上使用ref屬性，因爲它們沒有實例。」** –

您可以在**功能無狀態組件上使用'ref'屬性**：https： //www.robinwieruch.de/react-ref-attribute-dom-node/ –

這個問題（或者更喜歡在它的工作方式的變化）的反應，引導有關。你這樣做的方式將不再起作用。

<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：這是關於此主題的related github issue。

來源

2016-12-11 17:59:03

我剛剛提出這個問題。我的代碼：

<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

來源

2016-12-13 09:35:49

我有同樣的問題你，這是我的解決方案

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

來源

2017-04-13 08:09:54

如何在react-bootstrap表單中使用「refs」獲取輸入值？

回答

相關問題