Overcoming lack of refs in stateless components - reactjs

Question

I'd like to create a stateless Search component. When the button is clicked, I need to access the value of the search field. Is the following an acceptable way to do this? Are they any drawbacks to this approach?
const Search = ({onBtnClick}) => {
const onClick = (e) => {
const query = e.target.previousSibling.value;
onBtnClick(query);
};
return(
<div>
<input type="search" />
<button onClick={onClick}>Search</button>
</div>
)
}

Answer 1

In stateless components you can use ref with function, like so
const Search = ({ onBtnClick }) => {
let search;
const setNode = (node) => {
search = node;
};
const onClick = () => {
onBtnClick(search.value);
};
return (
<div>
<input type="search" ref={ setNode } />
<button onClick={ onClick }>Search</button>
</div>
);
}
function onBtnClick(value) {
console.log(value);
}
ReactDOM.render(
<Search onBtnClick={onBtnClick} />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

Answer 2

I'm not connoisseur of react, but i think that your approach is OK,
because in official react documentation i saw NOT one time something like that {value: event.target.value}:
Here we have component with state, and have this:
this.setState({value: event.target.value});
but i think in your component without state it will be OK use:
let query = e.target.previousSibling.value;
onBtnClick(query);
PS: I also like Alexander T. answer.)