Reactjs – React Bootstrap. How to get value of Form.Control

react-bootstrapreactjs

I have this React Bootstrap class and I have do idea how to catch its value when button is clicked? How to see this in documentation?

Spent a lot of time…

this is my code with warning in console Warning: React does not recognize the inputRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase inputref instead. If you accidentally passed it from a parent component, remove it from the DOM element.:

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;

Best Answer

Try this:

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

Demo

Related Topic