如何获取React-Bootstrap表单控件的值？

Question

我有一个React Bootstrap类，不知道如何在点击按钮时捕获其值？ 在文档中如何查看此内容？

花费了很多时间...

这是我的代码，在控制台上出现警告警告：React无法识别DOM元素上的inputRef属性。 如果您希望它作为自定义属性显示在DOM中，请将其拼写为小写inputref。 如果您意外从父组件传递了它，请从DOM元素中删除它。：

import React, { Component } from 'react';
import { Button, Form } from 'react-bootstrap';
import '../../styles/feedback-send.css';

class FeedbackSend extends Component {
  constructor(props) {
    super(props);
    this.inputNode = '';
  }

  onSubmit() {
    const data = this.inputNode.value;
    console.log(data);
  }

  render() {
    return (
      <Form.Group className="m-0">
        <Form.Control
          className="textFeedback"
          as="textarea"
          rows="3"
          placeholder="feedback"
          inputRef={(node) => { this.inputNode = node; }}
          type="text"
        />
        <Button
          className="btnFormSend"
          variant="outline-success"
          onClick={this.onSubmit}
        >
          Send Feedback
        </Button>
      </Form.Group>
    );
  }
}

export default FeedbackSend;

- Robert Gurjiev

Answer 1

试一试：

import React, { Component } from "react";
import { Form, Button } from "react-bootstrap";

export default class App extends Component {
  state = {
    val: ""
  };

  onSubmit = () => {
    console.log(this.state.val);
  };

  render() {
    return (
      <Form.Group className="m-0">
        <Form.Control
          className="textFeedback"
          as="textarea"
          rows="3"
          placeholder="feedback"
          value={this.state.val}
          onChange={e => this.setState({ val: e.target.value })}
          type="text"
        />
        <Button
          className="btnFormSend"
          variant="outline-success"
          onClick={this.onSubmit}
        >
          Send Feedback
        </Button>
      </Form.Group>
    );
  }
}

演示

- Danko