Click on <div> to focus <input> (React) [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
The community reviewed whether to reopen this question last year and left it closed:
Original close reason(s) were not resolved
Improve this question
I know how to do this with jquery. But I am stuck with React: How would I focus an input field, whenever the user clicks on a div?

You need to have an onClick event on the div and the call the focus() function on the input element that you can access by refs in react
class App extends React.Component {
render() {
return (
<div>
<div onClick={() => {this.myInp.focus()}}>Focus Input</div>
<input type="text" ref={(ip) => this.myInp = ip} />
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<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="app"></div>
In the above snippet ref={(ip) => this.myInp = ip} is a callback approach of declaring refs which is recommended by react-docs

Check this https://facebook.github.io/react/docs/refs-and-the-dom.html
Via ref you can anything jquery-like.

Related

Javascript: Change element class if button has a certain value [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
Improve this question
<div class="main-div main-div2"> <!-- IF up to date, main-div3 -->
<button id="update-btn" class="btn update-btn">
Up to date
</button>
</div>
I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"
What kind of loop would be good for this Javascript function too if I want it to be
checking constantly?
Thank you.
there are many method to do it, here is the basic idea that you can get it done.
var btnText = document.getElementById("update-btn").innerText
var divClass = document.getElementById("outer-div")
if(btnText == "Up to date"){
divClass.classList.remove("main-div2");
divClass.classList.add("main-div3");
}else{
divClass.classList.remove("main-div3");
divClass.classList.add("main-div2");
}
.main-div2{
background-color:red;
}
.main-div3{
background-color:blue;
}
<div id="outer-div" class="main-div main-div2">
<button id="update-btn" class="btn update-btn">
Up to date
</button>
</div>
checkout the above snippet, its checking the text In if condition and sets up the class for parent div according to the text in the button, you can read more about adding and removing class from here

Click the button and it sends that info into another box on the page [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I want to be able to click on a button then that puts that information into another part on the page (in a box). However, I want the ability to remove this from that box too.
What is the best way to do this using html and javascript?
thanks
Using html, css and jQuery you can get your desired output.
Please check below code.
function getHtml() {
var test = $("#input").text();
$("#output").show();
$("#remove").show();
$("#output").text(test);
}
function remove() {
$("#output").hide();
$("#remove").hide();
}
#output {
display: none;
}
#remove {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input">
Input: welcome
</div>
<button onClick="getHtml()">Click</button>
<div id="output">
</div>
<button id="remove" onClick="remove()">Remove</button>

example on how and when to use focus in react [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I see many questions on how to use focus() on a ref in react, but I seem to miss the general understanding of how and when exactly should I use focus.
can anyone offer an example?
I read https://reactjs.org/docs/refs-and-the-dom.html and still missing the point
thanks!
Sure.
ref are used to reference an element's DOM, therefore you must have the ref attribute for that element set, since we are going to be accessing it outside of the render method.
Ref is created using React.createRef() method provided by the react library.
Let's suppose that you want to focus on email address of a form when you load your login page, the page has render method as
render() {
return (
<form>
<input id="email" type="email" />
<input id="password" type="password" />
<button type="submit">Login</button>
</form>
);
}
and since you want to set the focus on the email field when the page loads, therefore you are going to use the componentDidMount() lifecycle hook.
But before that we need to create a ref
constructor() {
super();
this.inputElement = React.createRef();
}
and then assign the reference to the email input
<input id="email" type="email" ref={this.inputElement} />
finally we would focus the email when the page loads
componentDidMount() {
this.inputElement.current.focus();
}

Search google for text entered in an input field [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm looking to make a Google search bar for a website I am creating. I would like to search Google for the text entered in an <input> tag. Any help would be greatly appreciated.
Try something like this
<script>
function googleSearch()
{
var text=document.getElementById("search").value;
var cleanQuery = text.replace(" ","+",text);
var url='http://www.google.com/search?q='+cleanQuery;
window.location.href=url;
}
</script>
<input type="text" id="search" />
<button onclick="googleSearch();">Search</button>

Edit a disabled input field with javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a disabled field that I want to edit with the below script
<html>
<select id="country"onchange="changeCountryCode()">
<input type="text" disabled id="cc">
<script>
function changeCountryCode()
{
var temp = $('country').val();
$('cc').val(temp);
}
</script>
</html>
It's not working for me.
What you have almost works but you are missing the # in your selectors. The # sign tells jQuery to use the ID attribute when looking up the element desired.
Should be:
var temp = $('#country').val();
$('#cc').val(temp);

Categories

Resources