Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 months ago.
Improve this question
Can someone explain why the following code is displaying "library empty"? I'm not changing the input nor clicking on it, I don't understand why the function is being run.
import './App.css';
import {useState} from 'react'
function App() {
const [library, setLibrary] = useState()
const handleFile = () => {
if (library) console.log('library full')
console.log('library empty')
}
return (
<form>
<label>
<div className='btn-three'>
Select Directory:
<input type="file" onClick={handleFile()}/>
</div>
</label>
</form>
);
}
export default App;
In JSX function was directly called(handleFile()), instead of providing function reference(handleFile), so function got executed when browser loads scripts.
<input type="file" onClick={handleFile()}/>
Change above code to below
<input type="file" onClick={handleFile}/>
Change the function called
<input type="file" onClick={handleFile}/>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 28 days ago.
Improve this question
useNaviagte() of react-router-dom:^6.7.0 is not working for a dynamic search query. How to use my search text as a navigating route?
My Search component:
import { useNavigate } from 'react-router-dom';
function SearchBar() {
const [searchItem, setSearchItem] = useState("")
const navigate = useNavigate();
const handleSubmit = (e) =>{
e.prevnetDefault()
navigate(`/search?q=${searchItem}`)
};
return (
<div className='search-bar'>
<form onSubmit={handleSubmit}>
<label htmlFor='search'>Search: </label>
<input
type= "text"
id= "search"
onChange= {(e) => setSearchItem(e.target.value)}
/>
</form>
... ...
In App.js:
{
path: "/search",
element: <div><Search/></div>,
},
Package.json:
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.7.0",
it looks like there is a typo when you call e.preventDefault(). That may be causing an issue. Also, you could use controlled input by adding a value attribute to your input field like:
<input
type= "text"
id= "search"
value={searchItem}
onChange= {(e) => setSearchItem(e.target.value)} />
It would be helpful if you shared your search route page to share the code you are using there. You can use useSearchParams to grab the search parameters on your search page.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
<script>
function txtchk(as, tb) {
//as is gonna be an asterisk
//tb is a an input type text
if (document.getElementById(tb).value == "") {
document.getElementById(as).style.display = "block";
}
else {
document.getElementById(as).style.display = "none";
}
}
</script>
So when the tbox is empty, display the asterisk, else don't. The if statement is correct but how do I write the parameter?
<div class="b1">
<h>Book Name:</h>
<h class="astyle" id="asterisk1">*</h>
<div class="b2">
<input type="text" id="tbox1" oninput="txtchk(asterisk1, tbox1)">
//is using on input wrong?
</div>
Here I want the same to happen using the same function but different ids.
<div class="b1">
<h class="b1c">Description:</h>
<h class="astyle" id="asterisk2">*</h>
<div class="b2">
<textarea class="tarea" id="tbox2" oninput="txtchk(asterisk2, tbox2)">
</textarea>
</div>
</div>
Your parameters must be string. Change your oninput like this
oninput="txtchk('asterisk2', 'tbox2')"
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();
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I'm trying to make a simple login form with HTML and CSS, but I'm unable to use document.getElementById() for my textbox.
The following error occurs in the console of my browser:
TypeError: document.getElementbyId is not a function
P.S: I'm a noob at js
My code:
<div id='logon'>
<input type=text placeholder='Username' id='un' style='width:50%; height:10%;'><br>
<input type=password placeholder='Password' id='pw' style='margin-top:2%; width:50%; height:10%'><br><br>
<button id='button' onclick='auth()'>Enter</button><br>
</div>
<script>
function auth(){
var x = document.getElementById("un");
var y = document.getElementbyId("pw");
if(x.value.toString()==="bla" && y.value.toString()==="bla")
document.getElementbyId("invalidd").innerHTML = "<div id='invalid'>Invalid</div>";
else
alert("Welcome!");
}
</script>
Make sure that the b is in upperCase format, like :
document.getElementById
___________________^
console.log(document.getElementById('test_1')); //Valid function
console.log(document.getElementbyId('test_2')); //Invalid function
<span id="test_1">Test 1</span>
<br>
<span id="test_2">Test 2</span>
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.