I want to add close button to my react pop up so I added this line
<button onClick = {$('.scoreboard-trigger').close}>Close</button>
but when I clik Close button it does not close
here is my all component
import $ from 'jquery';
import React from 'react';
import { FormattedMessage } from 'util/IntlComponents';
import OkeyScoreboard from './OkeyScoreboard';
class OkeyScoreboardDialog extends React.Component {
componentDidMount() {
$('.scoreboard-trigger').leanModal({
opacity: 0
});
}
render() {
const { scoreboard, profiles } = this.props;
const scoreboardTitle = <FormattedMessage message="room_title.scoreboard"/>;
return (<div id='scoreboardModal'
className='scoreboard-modal modal'>
<div className='modal-content'>
<h4 className='center'>{scoreboardTitle}</h4>
<OkeyScoreboard profiles={profiles} scoreboard={scoreboard}/>
<button onClick = {$('.scoreboard-trigger').close}>Close</button>
</div>
<div className='modal-footer'>
</div>
</div>);
}
}
class OkeyScoreboardDialogTrigger extends React.Component {
render() {
const scoreboardTitle = <FormattedMessage message="room_title.scoreboard"/>;
return <a className='scoreboard-trigger modal-trigger btn blue-grey darken-3'
href='#scoreboardModal'>
{scoreboardTitle}
</a>;
}
}
export { OkeyScoreboardDialog };
export { OkeyScoreboardDialogTrigger };
I think you should wrap this in function
$('.scoreboard-trigger').close
in function and pass it to onClick method in button,
I create the example wrap it in function close and pass it to the onClick
import $ from 'jquery';
import React from 'react';
import { FormattedMessage } from 'util/IntlComponents';
import OkeyScoreboard from './OkeyScoreboard';
class OkeyScoreboardDialog extends React.Component {
componentDidMount() {
$('.scoreboard-trigger').leanModal({
opacity: 0
});
}
close() {
$('.scoreboard-trigger').close;
}
render() {
const { scoreboard, profiles } = this.props;
const scoreboardTitle = <FormattedMessage message="room_title.scoreboard"/>;
return (<div id='scoreboardModal'
className='scoreboard-modal modal'>
<div className='modal-content'>
<h4 className='center'>{scoreboardTitle}</h4>
<OkeyScoreboard profiles={profiles} scoreboard={scoreboard}/>
<button onClick = {this.close()}>Close</button>
</div>
<div className='modal-footer'>
</div>
</div>);
}
}
class OkeyScoreboardDialogTrigger extends React.Component {
render() {
const scoreboardTitle = <FormattedMessage message="room_title.scoreboard"/>;
return <a className='scoreboard-trigger modal-trigger btn blue-grey darken-3'
href='#scoreboardModal'>
{scoreboardTitle}
</a>;
}
}
export { OkeyScoreboardDialog };
export { OkeyScoreboardDialogTrigger };here
Try to use reacjs-popup A simple react popup component ( 3kb)
Related
I have a Button.js component and I am using it on multiple locations on my app. How can I add the button value such as <button>hello world</button> when I am importing it on my Dashboard.js component?
Button.js
import React, { Component } from "react";
import './Button.css'
class Button extends Component {
render() {
return (
<button></button>
);
}
}
export default Button;
Dashboard.js
import React, { Component, useMemo, useState } from "react";
import Button from "../Button/Button";
import SearchBox from "../SearchBox/SearchBox";
import "./Dashboard.css";
import fire from "../../fire";
import UserList from "./UserList";
class Dashboard extends Component {
render() {
return (
<div>
<Button/>
</div>
);
}
}
export default Dashboard;
You can pass a value to Button component in two ways
export default class Dashboard extends React.Component {
render() {
return (
<div>
<Button>Hello world</Button>
</div>
);
}
}
class Button extends React.Component {
render() {
return (
<button>{this.props.children}</button>
);
}
}
or
export default class Dashboard extends React.Component {
render() {
return (
<div>
<Button value="hello world"/>
</div>
);
}
}
class Button extends React.Component {
render() {
return (
<button>{this.props.value}</button>
);
}
}
Pass the value in as a prop.
In the Dashboard component:
class Dashboard extends Component {
render() {
return (
<div>
<Button value="hello world"/>
</div>
);
}
}
In the button component:
class Button extends Component {
render() {
return (
<button>{this.props.value}</button>
);
}
}
send text via props
Button.js
class Button extends Component {
render() {
return (
<button>{this.props.text}</button>
);
}
}
Dashboard.js
class Dashboard extends Component {
render() {
return (
<div>
<Button text={'Here is your custom text'}/>
</div>
);
}
}
class Button extends Component {
constructor(props: any) {
super(props);
}
render() {
return (
<button>
{this.props.children}
</button>
);
}
}
class Dashboard extends Component {
render() {
return (
<div>
<Button>
hello world
</Button>
</div>
);
}
}
onmouse is not working when I hover my mouse on the text in h1 tag, but its printing value in the console when I click on it.
import React, {
Component
} from 'react';
class App extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick = (event) => {
let word = event.target.innerText;
console.log(word)
}
render() {
return (<div>
<div className="App">
<h1 onMouseOver = {this.handleClick}>hover Me</h1>
</div>
</div>);
}
}
export default App;
the code works fine, only the "super(props)" part has been deprecated, another trick: when you use Arrow functions you don't need to bind the function in the constructor. This is the complete code:
import React, { Component } from 'react';
class YourComponent extends Component {
constructor(props) {
super();
this.state={};
}
handleClick = (event) => {
let word = event.target.innerText;
console.log(word)
}
render() {
return (
<div>
<div className="App">
<h1 onMouseOver={this.handleClick}> hover Me </h1>
</div>
</div>
);
}
}
export default YourComponent;
Enjoy ;)
I am trying to use a component that is already created, but I cant figure out what the problem is:
activetenant
import React, { Component } from 'react';
import authAction from '../../redux/auth/actions';
class ActiveTenant extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
export default ActiveTenant;
and the component where I am trying to use it
import React, { Component } from "react";
import { connect } from "react-redux";
import { Layout } from "antd";
import appActions from "../../redux/app/actions";
import TopbarUser from "./topbarUser";
import TopbarWrapper from "./topbar.style";
import themes from "../../settings/themes";
import { themeConfig } from "../../settings";
import { ActiveTenant } from "./activetenant";
const { Header } = Layout;
const { toggleCollapsed } = appActions;
const customizedTheme = themes[themeConfig.theme];
class Topbar extends Component {
render() {
const { toggleCollapsed } = this.props;
const collapsed = this.props.collapsed && !this.props.openDrawer;
const styling = {
background: customizedTheme.backgroundColor,
position: "fixed",
width: "100%",
height: 70
};
return (
<TopbarWrapper>
<Header
style={styling}
className={
collapsed ? "isomorphicTopbar collapsed" : "isomorphicTopbar"
}
>
<div className="isoLeft">
<button
className={
collapsed ? "triggerBtn menuCollapsed" : "triggerBtn menuOpen"
}
style={{ color: customizedTheme.textColor }}
onClick={toggleCollapsed}
/>
</div>
<ul className="isoRight">
<li>
<ActiveTenant />
</li>
<li
onClick={() => this.setState({ selectedItem: "user" })}
className="isoUser"
>
<TopbarUser />
</li>
</ul>
</Header>
</TopbarWrapper>
);
}
}
export default connect(
state => ({
...state.App.toJS()
}),
{ toggleCollapsed }
)(Topbar);
And the error
./src/containers/Topbar/Topbar.js 105:34-46 './activetenant' does not
contain an export named 'ActiveTenant'.
You are use export default ActiveTenant In this case code should be like this
import ActiveTenant from "./activetenant";
If you want to export mulitple value then use {} to import
for example
//test.js
var a = "cool";
var b = "dool";
export a;
export b;
import {a,b} from './test.js'
While trying to toggle between two child components, I need to have the trigger button in the child component, and pass the click function through the child component to the in order to toggle the other child component. I'm not sure how to push the props from the child to the parent in order to trigger the toggle.
Parent component
import React from 'react'
import CancelOffer from '../CancelPages/CancelOffer'
import CancelWarning from '../CancelPages/CancelWarning'
class Cancel extends React.Component {
constructor() {
super()
this.state = {
isHidden: true
}
}
toggleOffer() {
this.setState({
isHidden: !this.state.isHidden
})
}
render() {
return (
<div className = 'cancel'
style = {{backgroundImage: `url(${this.props.backgroundImage})`}} >
<div className = 'container' >
{!this.state.isHidden &&
<CancelOffer { ...this.props}/>
}
{this.state.isHidden &&
<CancelWarning { ...this.props}/>
}
{this.state.isHidden &&
<button onClick = {this.toggleOffer.bind(this)} > Click < /button>
}
</div>
</div>
)
}
}
export default Cancel
Child component
import React from 'react'
import SvgIcon from '../SvgIcon/SvgIcon'
import './CancelWarning.scss'
function CancelOffer (props) {
const content = props.config.contentStrings
return (
<div className='cancel-warning'>
<h2 className='heading md'>heading</h2>
<p className='subpara'>subheading</p>
<div className='losses'>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</div>
<div className='footer-links'>
<a href='/member' className='btn btn--primary btn--lg'>continue</a>
<a href='/cancel' className='cancel-link'>Cancel</a>
//NEED TO HAVE BUTTON HERE AND PASS PROPS TO PARENT TO TOGGLE VIEW
{this.state.isHidden &&
<button onClick = {this.toggleOffer.bind(this)}>Click</button>
}
</div>
</div>
)
}
export default CancelOffer
You can just pass it like regular param. Also, you can use arrow functions instead of binding.
Parent component
import React from 'react'
import CancelOffer from '../CancelPages/CancelOffer'
import CancelWarning from '../CancelPages/CancelWarning'
class Cancel extends React.Component {
constructor() {
super()
this.state = {
isHidden: true
}
this.toggleOffer = this.toggleOffer.bind(this);
}
toggleOffer() {
this.setState({
isHidden: !this.state.isHidden
})
}
render() {
const { isHidden } = this.state
return (
<div className = 'cancel'
style = {{backgroundImage: `url(${this.props.backgroundImage})`}} >
<div className = 'container' >
{!isHidden &&
<CancelOffer toggleOffer={this.toggleOffer} isHidden={isHidden}/>
}
{isHidden &&
<CancelWarning toggleOffer={this.toggleOffer} isHidden={isHidden}/>
}
{isHidden &&
<button onClick = {this.toggleOffer}> Click </button>
}
</div>
</div>
)
}
}
export default Cancel
Child component
import React from 'react'
import SvgIcon from '../SvgIcon/SvgIcon'
import './CancelWarning.scss'
function CancelOffer (props) {
const content = props.config.contentStrings
return (
<div className='cancel-warning'>
<h2 className='heading md'>heading</h2>
<p className='subpara'>subheading</p>
<div className='losses'>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</div>
<div className='footer-links'>
<a href='/member' className='btn btn--primary btn--lg'>continue</a>
<a href='/cancel' className='cancel-link'>Cancel</a>
{props.isHidden &&
<button onClick = {props.toggleOffer}>Click</button>
}
</div>
</div>
)
}
export default CancelOffer
I have the problem when I use the Reactjs, I'm really new to Reactjs, so maybe it's a easy problem
I want to use the class ClickButton in the UserInfo,but I don't know how to change the name through props
import React, { PropTypes } from 'react';
import { Button } from 'antd';
import { connect } from 'react-redux';
import styles from './ClickButton.less';
const ClickButton = ({ todos,dispatch }) => {
const userinforclick = () => {
dispatch({
type: 'todos/clickbutton',
payload: !todos['click_button'],
});
};
return (
<span>
< span type="primary" className={ styles.show } onClick={ userinforclick.bind(this) } > {this.props.name} < /span >
</span>
);
};
function clickbutton({ todos }){
return{
todos:todos,
}
}
export default connect(clickbutton)(ClickButton)
and i use the ClickButton in UserInfo:
import React from 'react'
import styles from './Userinfo.less'
import ClickButton from '../../components/Button/ClickButton'
import { connect } from 'react-redux';
import { Spin } from 'antd'
const Userinfo = ({ todos,dispatch }) => {
const { userinfo, userinfoloading, click_button } = todos;
if(userinfoloading) {
return <Spin />;
}
const renderList = () => {
return(
<div className={ styles.userInfodiv}>
<div>
<span className={ styles.userInfoTitle }>userinfo</span>
</div>
<div className = { styles.slice }></div>
<div className = { styles.userInfoBody}>
<div className = { styles.userInfoSubBody }>
<span>username：</span>
<span>{userinfo[0]['username']}</span>
</div>
<div className = { styles.userInfoSubBody }>
<span>number：</span>
{ click_button ? <span>{userinfo[0]['phone']}</span> : <input type="text" value={userinfo[0]['phone']} /> }
<ClickButton name="john" />
</div>
</div>
</div>
);
};
return (
<div>
{ renderList() }
</div>
);
};
function mapStateToProps({ todos }) {
return {
todos: todos,
};
}
export default connect(mapStateToProps)(Userinfo);
Here's something that actually works (although I removed the todos and such but you can add them in easily):
class RenderList extends React.Component {
render() {
return (<span> {this.props.name} </span>);
}
}
class App extends React.Component {
render() {
return (<div>
<RenderList name="John"/>
</div>)
}
}
ReactDOM.render(<App/>,document.getElementById("app"));