I have two buttons named selectall in two different components . in Acompoent I am having selectall button and its selectall function. I am trying to call this selectall function from Bcompoent. Here Bcompoent and Acompoent has relation with Ccompoent. can someone tell me how to trigger selectAll from Bcompoent.
Acompoent
selectAll={selectAll}
const selectAll = (e) => { console.log ("selectAll")}
For this you will need to pass a method from your parent component to both A & B components like so:
class Parent extends React.Component{
.
.
.
selectAll = (data) => {
console.log({data});
}
render(){
return(
<ComponentA selectAll={this.selectAll} />
<ComponentB selectAll={this.selectAll} />
)
}
}
class ComponentA extends React.Component{
.
.
.
render(){
return(
<button onClick={() => this.props.selectAll(data)>click me</button>
)
}
}
class ComponentB extends React.Component{
.
.
.
render(){
return(
<button onClick={() => this.props.selectAll(data)>click me</button>
)
}
}
class Parent extends React.Component {
selectAll = (e) => { console.log ("selectAll")}
render () {
return(
<Child eyeColor={selectAll} />
)
}
}
class Child extends React.Component {
render () {
return(
<div style={{backgroundColor: this.props.eyeColor} />
)
}
}
Or You can try this <Child eyeColor={selectAll()} />
If you have reusable functions create another component with those functions (Util component) and export all the functions you need to reuse.
Utils.js file
import React from 'react'
function reUseFun1(/*parameters*/) {
//f1 body
}
function reUseFun2(/*parameters*/) {
//f2 body
}
export {
reUseFun1,
reUseFun2
}
When the a util function needs to use
import React from 'react';
import Utils from './Utils';
function Component() {
return(
<button onClick={Utils.reUseFun1(/*parameters*/)}> Cick Here </button>
)
}
export default Component;
Related
I have a requirement in which I have to call a function present in a child component from parent component using React.createRef() but the problem here is that it is multilevel child.
I'm able to call a function present in 'ChildComponent1' component but not able to call a function present in 'ChildComponent2' component from 'Parent' component. Please tell me a correct way to do this.
This is my parent.js file
import React, { Component } from 'react';
import ChildComponent1 from './ChildComponent1';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
callFunctionFromChild = () => {
this.ref.current.doSomething()
}
render() {
return (
<div>
<ChildComponent1 ref={this.childRef} />
<button onClick={()=>{this.callFunctionFromChild()}}> Click Me <button>
</div>
);
}
}
export default ParentComponent;
This is my ChildComponent1.js file:
import React, { Component } from 'react';
import ChildComponent2 from './ChildComponent2';
class ChildComponent1 extends Component {
render() {
return (
<div>
<ChildComponent2 ref={this.props.ref} />
</div>
);
}
}
export default ChildComponent1;
and this is my inner ChildComponent2.js file:
import React, { Component } from 'react';
class ChildComponent2 extends Component {
doSomething = () => {
console.log("Something is done!!");
}
render() {
return (
<div>
My Child Component
</div>
);
}
}
export default ChildComponent2;
Need this code more simplified. All I wanna do is have an onClick event perform an action, but the code seems overcomplicated for what I wanna do:
import React, { Component } from 'react';
class Comment extends Component{
constructor(){
super();
this.state= {name:''};
this.display = this.display.bind(this);
}
display(){
this.setState({name:'Test2'});
}
render(){
return(
<div>
<button onClick={this.display}>Click me</button>
<h1>{this.state.name}</h1>
</div>
)
}
}
export default Comment;
If you're using React 16.8, then a simpler implementation as a functional component based on the useState hook is possible like so:
import React, { useState } from 'react';
/* Define functional equivalent of Comment component */
const Comment = () => {
/* Setup name state getter/setter via useState hook */
const [name, setName] = useState('')
/* Render comment JSX */
return (<div>
<button onClick={() => setName('Test2')}>Click me</button>
<h1>{name}</h1>
</div>)
}
export default Comment;
If you don't want to try Hooks (Hooks are added in V16.8), then arrow function is also a simple one,
class Comment extends Component {
constructor() {
super()
this.state = {name: ''}
}
render() {
return (
<div>
<button onClick={() => this.setState({name: 'Test2'})}>Click me</button>
<h1>{this.state.name}</h1>
</div>
)
}
}
Demo
I want to make when i click button, show modal in different class.
how to make it this?
import React, { Component } from 'react';
import addmodal from './addmodal';
class page extends Component {
...//skip
handleAdd= () =>{
//...how?
}
render(){
return (
<button onClick={this.handleAdd} > Add </button>
)
}
}
import React, { Component } from 'react';
class addmodal extends Component {
// ... skip
render(){
return(
<modal inOpen={this.state.isopen} >
...//skip
</modal>
)
}
}
export default addmodal;
I can't call this addmodal...
how to call modal?
First, your variable naming is terrible. I fixed it for you here. The state that dictates if modal is open must be on the parent component since you have your trigger there. Then, pass it as props to the modal component. Here is the fixed code for you:
import React, { Component } from 'react';
import AddModal from './addmodal';
class Page extends Component {
constructor(){
super();
this.state = { isModalOpen: false };
}
...//skip
handleAdd= () =>{
this.setState({ isModalOpen: true });
}
render(){
return (
<div>
<button onClick={this.handleAdd} > Add </button>
<AddModal isOpen={this.state.isModalOpen} />
</div>
)
}
}
import React, { Component } from 'react';
class AddModal extends Component {
// ... skip
render(){
return(
<modal inOpen={this.props.isOpen} >
...//skip
</modal>
)
}
}
export default AddModal;
what about using trigger. Its very usefull.
<Modal trigger={ <button onClick={() => onCLickPay()} className={someting}> When clicked here modal with show up</button> }`enter code here` >
Can I use children in React Container or is it wrong?
For example, I have a list of buttons(ActionButton) that are grouped together (ActionMenu).
import React from 'react';
class App extends React.Component {
render() {
return (
<ActionMenu>
<ActionButton name="New" icon="add" />
<ActionButton name="Delete" icon="remove" />
</ActionMenu>
)
}
}
class ActionMenu extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert('Click!');
}
render() {
return React.Children.map(this.props.children, (button) =>
React.cloneElement(button, {
onClick: this.handleClick
})
);
}
}
function ActionButton({ name, icon, onClick }) {
return <button class={icon} onClick={onClick}>{name}</button>
}
You can use children regardless of whether it's a component of container.
"[children are] especially common for components like Sidebar or Dialog that represent generic 'boxes'."
In your case you have a menu, which falls into this category.
https://reactjs.org/docs/composition-vs-inheritance.html
I think this is what you are after. Actually you should just put the children in its closest parent instead of its grandpa.
import React from 'react';
import { render } from 'react-dom';
function ActionButton({ name, handleClick }) {
return <button onClick={handleClick}>{name}</button>
}
class ActionMenu extends React.Component {
constructor(props) {
super(props);
}
handleClick = () => {
alert('Click!');
}
render() {
return (
<div>
<ActionButton name="add" handleClick={this.handleClick}/>
<ActionButton name="remove" handleClick={this.handleClick} />
</div>
);
}
}
class App extends React.Component {
render() {
return (
<ActionMenu />
)
}
}
render(<App />, document.getElementById('root'));
You can try to run it in sandbox.
By the way, using bind is quite redundant now, we can use public class fields syntax, which is already ECMA stage 2.
I have two components:
Parent.js
export default class Parent extends React.Component {
handleTagHierClick(e) {
var excel = this.refs.workbook;
excel.click();
}
render() {
return (
<button onClick={(e) => this.handleTagHierClick(e)} className="btn btn-default btn-block">Download Tag Hier</button>
<Child/>
)
}
}
And Child.js
import React from 'react';
export default class Child extends React.Component {
render() {
return (
<div ref='workbook'></div>
)
}
}
How can I trigger a click on the div element from the Child component when I click on the button element from the Parent component? I tried with ref but that won't work since the elements are on different components...
If I understood you right, you do it like
class Parent extends React.Component {
handleTagHierClick(e) {
this.child.someMethod();
}
render() {
return (<div>
<Child ref={(obj) => { this.child = obj; }}/>
<button
onClick={(e) => this.handleTagHierClick(e)}/>
</div>
);
}
}
Inside child
import React from 'react';
export default class Child extends React.Component {
someMethod(){
// Here you can trigger click on the div
this.div.click();
}
render() {
return (
<div ref={(obj) => { this.div = obj; }}></div>
)
}
}
Did you try to add a ref to the button?
<button ref='myButton'...
Then replace the variable excel by:
var excel = this.refs.myButton.refs.workbook;