I am using the code below to create a react component.
function Button(props) {
return (
<button onClick={props.handleClick}>
{props.name}
</button>
)
}
class LikeButton extends React.Component {
handleClick = () => {
console.log('ciao');
}
render() {
return (
<Button handleClick={this.handleClick}
name='Get' />
)
}
}
ReactDOM.render(<LikeButton />, document.getElementById('buttons'));
I tried the code with sandbox and it works perfectly. The problem is when I run my code, I get an error syntax in the third line of my Button function.
At first, I thought it was an error related to babel but I am using the CDN and it is supposed to work.
If you are using Babel from a CDN for experimentation you need to make sure your script tag has the attribute type="text/babel" as well.
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="buttons"></div>
<script type="text/babel">
function Button(props) {
return <button onClick={props.handleClick}>{props.name}</button>;
}
class LikeButton extends React.Component {
handleClick = () => {
console.log('ciao');
}
render() {
return <Button handleClick={this.handleClick} name='Get' />;
}
}
ReactDOM.render(<LikeButton />, document.getElementById('buttons'));
</script>
Related
I'm new in reactJS, and I am trying to use pure flatpickr (https://flatpickr.js.org , NOT react-flatpickr)
Below is my current code. Any help on how to implement it properly?
import React, { Component } from "react"
import flatpickr from "flatpickr"
export default class Datepicker extends Component<IProps> {
public render() {
flatpickr(".datepicker")
return (
<div>
<input type="text" className="datepicker" />
</div>
)
}
}
flatpickr requires a node or selector passed into it. In React, for referring to the DOM, we use a ref
For handling events and providing other options, you can use the second argument for options.
Here is a demo:
class App extends React.Component {
constructor(props) {
super(props);
this.datePicker = React.createRef();
}
onChange(selectedDates, dateStr, instance) {
console.log(selectedDates);
}
componentDidMount() {
flatpickr(this.datePicker.current, {
onChange: this.onChange
});
}
render() {
return(
<input type="date" ref={this.datePicker} />
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<div id="root"></div>
Example with hooks & Typescript (I had to use useCallback and useRef to make it work):
// Or configure the styling elsewhere.
import 'flatpickr/dist/flatpickr.css';
import flatpickr from 'flatpickr';
import { Instance } from 'flatpickr/dist/types/instance';
export default function Comp() {
const fp1 = useRef() as MutableRefObject<Instance>;
const inputRef = useCallback((node) => {
if (node !== null) {
fp1.current = flatpickr(node, {});
}
}, []);
return (<input type="date" ref={inputRef} />);
}
This is my components logic:
component_1
|
'------component_2
I have an input in component_2, and I want to put .focus () on it, but the function that will do this is in component_1, how can I do it?
And I think it will do the ref, if I'm wrong please correct me.
Since React 16.3, you can use React.createRef() in Component1 and pass it to the input via Component2 using ref forwarding:
const Component2 = React.forwardRef((props, ref) => (
<input ref={ref} />
));
class Component1 extends React.Component {
ref = React.createRef();
componentDidMount() {
setTimeout(() => this.ref.current.focus(), 1000);
}
render() {
return <Component2 ref={this.ref} />;
}
}
ReactDOM.render(
<Component1 />,
document.getElementById('demo')
);
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="demo"></div>
I'm using a CMS to build interfaces and need React JS to integrate into the system via CDN links. It gives me an error when trying to load some components. Do I have to explicitly keep loading components or is there some other way? Im using the following links:
`
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="react-container"></div>
<script type="text/babel">
class Note extends React.Component {
constructor(props) {
super(props)
this.state = {
checked: true,
activePage: 1
}
this.handleCheck = this.handleCheck.bind(this)
}
handleCheck() {
this.setState({
checked: !this.state.checked
})
}
handlePageChange(pageNumber) {
this.setState({activePage: pageNumber});
}
render() {
var msg
if(this.state.checked) {
msg = "checked"
} else {
msg = "not checked"
}
return (
<div>
<input type="checkbox"
onChange={this.handleCheck}
defaultChecked={this.state.checked}/>
<Pagination
hideNavigation
activePage={this.state.activePage}
itemsCountPerPage={10}
totalItemsCount={450}
pageRangeDisplayed={10}
onChange={this.handlePageChange}
/>
</div>
)
}
}
ReactDOM.render(
<Note />,
document.getElementById('react-container')
)
</script>
`
Also, sometimes it gives me out of memory error.
Browser hangs.
Below is an example of how to use cdn for reactjs. Hope it helps :)
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {
render() {
const name = 'Johnson';
return (<p>Hello world {name}</p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
);
</script>
Hi I am new to react and I am trying to create a component where we can pass event name(onclick, onChange etc.) as props. So the component can be customize in an event way as well. Is it possible?
<Input {this.props.eventName} = {this.props.name} />
This I want to do. Is it possible?
Do you want to achieve something similar to this -
One problem is that you must pass only supported events to the element type.
e.g in case of button onClick and other events supported by button.
class Parent extends React.Component {
render() {
return(
<ChildComponent
evtName = 'onClick'
evtHandler={ () => { console.log("event called!");}}
/>
)
}
}
class ChildComponent extends React.Component {
render() {
return React.createElement(
'button',
{ [this.props.evtName] : this.props.evtHandler },
'Click me'
); }
}
ReactDOM.render(
<Parent />,
document.getElementById('root')
);
<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="root"></div>
If I understand you correctly, just pass the event and it's handler as props. I didn't see the use case just considering the event name.
See the below example of reusing the same element with different events.
class Input extends React.Component {
render(){
const {} = this.props;
return (
<input {...this.props} />
);
}
}
class Test extends React.Component {
render(){
return (
<div>
<Input name="onClick" onClick={(e) => console.log(e.target.name)}/>
<Input name="onChange" onChange={(e) => console.log(e.target.name)}/>
</div>
);
}
}
ReactDOM.render(<Test />, document.getElementById("root"));
<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="root"></div>
Here is example how to pass an event from parent Component to Child - by having result in Parent Component.
class Parent extends Component {
//constructor, other methods, etc...
// We call our event update
update(stuff) {
console.log(stuff);
}
}
We pass in ParentComponent's render method a ChildComponent with props onClick(you can name it whatever you want).
<ChildComponent
onClick={this.update.bind(this)}
/>
Now, ChildComponent. To access our props onClick, we just use this.props.onClick. Our argument is just hello, you can pass as many arguments you want.
<button onClick={ (e) => this.props.onClick('hello') }>
Action
</button>
Here is working example:
class Parent extends React.Component {
update(stuff) {
console.log(e, stuff);
}
render() {
return(
<ChildComponent
onClick={this.update.bind(this)} />
)
}
}
class ChildComponent extends React.Component {
render() {
return(
<div>
<button onClick={ (e) => this.props.onClick('hello') }> Action</button>
</div>
)
}
}
ReactDOM.render(
<Parent />,
document.getElementById('root')
);
<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="root"></div>
I have a button in a parent component. I want to focus an input field, which is located in a child component, by clicking on that button. How can I do it.
You can make use of refs to achieve the result
class Parent extends React.Component {
handleClick = () => {
this.refs.child.refs.myInput.focus();
}
render() {
return (
<div>
<Child ref="child"/>
<button onClick={this.handleClick.bind(this)}>focus</button>
</div>
)
}
}
class Child extends React.Component {
render() {
return (
<input type="text" ref="myInput"/>
)
}
}
ReactDOM.render(<Parent/>, 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>
UPDATE:
React docs recommend on using a ref callback rather than string refs
class Parent extends React.Component {
handleClick = () => {
this.child.myInput.focus();
}
render() {
return (
<div>
<Child ref={(ch) => this.child = ch}/>
<button onClick={this.handleClick.bind(this)}>focus</button>
</div>
)
}
}
class Child extends React.Component {
render() {
return (
<input type="text" ref={(ip)=> this.myInput= ip}/>
)
}
}
ReactDOM.render(<Parent/>, 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>
Instead of accessing the child component's input element from parent, it's better to expose a method as below,
class Parent extends React.Component {
handleClick = () => {
this.refs.child.setFocus();
};
render() {
return (
<div>
<Child ref="child"/>
<button onClick={this.handleClick.bind(this)}>focus</button>
</div>
)
}
}
class Child extends React.Component {
setFocus() {
this.refs.myInput.focus();
}
render() {
return (
<input type="text" ref="myInput"/>
)
}
}
ReactDOM.render(<Parent/>, 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>