Cách lấy giá trị đầu vào bằng cách sử dụng "refs" ở dạng phản ứng-bootstrap?

Question

Tôi đang cố gắng tạo biểu mẫu xuất hiện theo phương thức. Vì vậy, khi người dùng nhập một giá trị, giá trị đó được lưu trữ trong bộ nhớ cục bộ. Dưới đây là một bức tranh có thể trợ giúp của bạn để hiểu những gì tôi muốn nói:
Đây là mã có dạng:

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

Như tôi đã đọc trong bootstrap Phản ứng hướng dẫn, tôi nên thêm
<FormControl inputRef={ref => { this.input = ref; }} /> đến FormControl đạo cụ. Nhưng sau khi thêm nó tôi nhận được một lỗi khi dạng phương thức được gọi:

'

Answer 1

Tôi nghĩ rằng những gì nó gợi ý để sử dụng là thuộc tính ref callback, vì vậy chỉ cần thay đổi inputRef-ref.

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

Answer 2

Vấn đề này (hoặc nhiều hơn như một sự thay đổi trong cách nó hoạt động) có liên quan đến Phản ứng-Bootstrap. Cách bạn đang làm nó sẽ không hoạt động nữa.

Thành phần <FormControl> trực tiếp hiển thị thành phần được chỉ định hoặc khác. Nếu bạn cần truy cập vào giá trị của <FormControl>, không được kiểm soát, hãy đính kèm với giá trị của đầu vào không được kiểm soát, sau đó gọi ReactDOM.findDOMNode(ref) để nhận nút DOM. Sau đó bạn có thể tương tác với nút đó như bạn làm với bất kỳ đầu vào không được kiểm soát nào khác.

Dưới đây là một ví dụ:

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

Ngay khi bạn nhận được phần tử DOM, bạn sẽ có thể lấy giá trị: this.getFormControlNode().value hoặc làm bất cứ điều gì khác mà bạn muốn.

PS: Đây là related github issue về chủ đề này.

Answer 3

Tôi vừa tạo ra vấn đề này. Mã của tôi:

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

Và sau đó bạn có thể nhận được giá trị từ <FormControl> trong một số xử lý như thế này:

console.log(this.input.value); 

chi tiết có thể được tìm thấy trong repo của tôi: https://github.com/kerf007/recipebook

Answer 4

Tôi có cùng một vấn đề với bạn, và đây là giải pháp của tôi

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

và biểu mẫu của tôi

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

sau đó bạn có thể nhận được 'tên của tác giả' cuốn sách tên giá trị bằng cách:

this.inputName.value and this.inputAuthor.value