How to get input text value on click - reactjs

Question

I want to Know how to get the input text values in ReactJS using simple onclick event.I Know that it can be possible to do it like below code:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
Value: ""
};
}
render() {
const { library } = this.state;
return (
<div>
<input type="text" onChange={this.handleChange} />
<button type="button" onClick={this.handleSearch}>
save
</button>
</div>
);
}
handleChange = evt => {
this.setState({ Value: e.target.value });
};
handleSearch = evt => {
console.log(this.state.Value);
};
}
ReactDOM.render(<App />, document.getElementById("ResultContainer"));
I want to know is there any other way to get the input text without using onChange={ this.handleChange } ?

Answer 1

Like others have suggested, you could use a ref if you're feeling adventurous, but your code works as is.
However, just for learning purposes, you can use a ref to access the traditional DOM aspects of the mark-up that you would find using Vanilla JavaScript and HTML.
Simply create a ref variable and pass it to the input's ref attribute. See working sandbox: https://codesandbox.io/s/floral-lake-z9szd
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
Value: ""
};
}
inputText = React.createRef();
handleSearch = () => {
if (this.inputText.current) {
console.log(this.inputText.current.value);
}
};
render() {
return (
<div>
<input type="text" ref={this.inputText} />
<button type="button" onClick={this.handleSearch}>
save
</button>
</div>
);
}
}

Answer 2

Same concept but simpler with Functional Component and react hooks:
const App =()=>{
const [value,setValue]=React.useState();
const handleSearch = ()=>{
console.log(value)
}
return(
<div>
<input type="text" value={value} onChange={e=>setValue(e.target.value)} />
<button type="button" onClick={handleSearch}>
save
</button>
</div>
)
}

Answer 3

Dont know about reasoning why you want to to it different way. But sure there are tons of possibilities. First of all => when you are working on react application. Never forget that react is jsut layer above the DOM (when working on web app). So when you want to do some crazy stuff let react expose dom to you. In case of event handler you can get real dome node through event.target, which is button element. So you can do something like event.target.parentNode.childNodes[0].value or event.target.previousSibling.value. Imagination can be infinite you know :). Using ref is also another possible solution. But always think about: One time, someone will try to read this code. So do it easier for him.