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 2 years ago.
Improve this question
While studying React, I found an example in which a button, when clicked, must give focus to an input text. Both input and button are distinct components.
I see two ways of accomplishing that:
Using Ref with input text and passing it down to the button;
Create a function/method inside the parent component (Parent) and pass it to the button so that it will call it back when clicked. Pass a prop (e.g. focus: true/false) to the input text and attribute a Parent state to it. When the button call the Parent function back, it updates the Parent state, which result in changing the input prop from false to true (for example).
While both approaches give the same result, the second one seems better to me (in inspite of needing more code) because it decouples the children components. The first approach requires less code, but passes details of the input to the button, harming the button reuse.
Is there any implications (objective - not a matter of preference) of using the first/second approach not mentioned by me?
Focus method with ref should work nicely.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus
You can always pass props to the onClick event of your reusable button.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
I am trying to program a simple component that moves the user to new Routes based on scrolling the mouse wheel, up until recently it has been working fine (scrolling up goes to the route listed above and vice versa) however there is a page where I do not want scrolling to change the route.
when I added a simple if check to my handleNavigation function to check if the user was on the route where I want to disable scrolling to different routes, I quickly ran into the problem that is not working, my logic is correct because when I manually go to the route (/work/portfolio) and try scrolling, the scrolling is disabled, however when following a link to it naturally, the scrolling feature is not disabled, I suspect that the useEffect event listener is not updating correctly, but I have location in the dependency array so it should update, why am I still able to scroll?
check the codesandbox above for the replicated issue: scroll to the very bottom, each scroll of the mouse wheel should route to a new page and then the final route '/work/' should appear, click on the link and notice that you are still able to scroll, when you should not be able to
I have seen your Sandbox. Add some function definition in Work.js component and then render it'll work fine.
import React from "react";
function Work() {
return (
<div>
<h1> Hii From Work</h1>
</div>
);
}
export default Work;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
So everytime I use setState my component rerenders. But I don't want my chart to rerender. My question is how do I prevent my chart from rerendering?
Create a new component for the chart. Prevent the rerender by memoizing it with Higher Order Component memo.
Though the issue is not very clear, but You can use useRef which does not
Re-renders the UI.
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 1 year ago.
Improve this question
Good day all,
I have two independent react components and I want to be able to render each by clicking on either radio buttons. How do I go about linking the radio buttons to their respective components? Thank you!!
You can use react-router to do that.
you can use react state. if you're using hooks you can do
// defaulting this to radioOne but can be anything
const [radioName, setRadioName] = useState('radioOne')
// then build a radio button and attach onClick event
<button onPress={() => setRadioName('radioTwo'}>Button Name </button>
then you can build another button for the other radio (or however many you have)
then build some rendering logic or whatever you want to based off that
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.
Improve this question
Actually I want to hide my navigation bar by clicking on hide button.
there are two buttons 1st one hide and another is show.. when I click on hide it should be hide my navigation bar and vice versa.
You can use the flag variable in the controller and use it on html with ng-show.
Add a function in the controller to set the true/false and invoke it when user will click on button.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
i'm early for angularjs.
i have some list, if i click one of list, popup will display. and after i chose option on popup, popup will close and background list will change. untill now it's work for only first list. ( i think )
and i got problem, when I click the second list, background first list change class to.
This samplemy
work
How to change background one by one after click option popup?
Please help me,
Thanks in advance
Here is an updated plunker, your problem is that you have one scope "class" item for your 2 items.
I separate it to 2 different scope value class1 and class2 and I switch the chooseItem via showPopup, and when you close the popup, I update the class1 and class2 according the chooseItem.