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;
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With