Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component, forwardRef, useRef, useEffect, useImperativeHandle, useState } from 'react';
- class App extends Component {
- state = { visible: false }
- refs = {}
- handleClick = () => {
- let keys = this.refs.keys()
- let visible = keys.every(ref=>this.refs[ref].initializeMessage());
- this.setState({ visible });
- };
- render(){
- return(
- <wrappedInput value={1} ref={ref1=>this.refs[ref1]} />
- <wrappedInput value={2} ref={ref2=>this.refs[ref2]} />
- <wrappedInput value={3} ref={ref3=>this.refs[ref3]} />
- <MessageBox visible={this.state.visible} />
- <button onClick={this.handleClick} />
- );
- }
- }
- const wrappedInput = forwardRef((props, ref) => {
- const [ error, setError ] = useState(false);
- const [ message, setMessage ] = useState("");
- useEffect(()=>{
- if(error){
- setMessage("oops");
- return error
- }
- }, [error]);
- input = useRef();
- useImperativeHandle(ref, ()=>({
- focus: ()=>input.current.focus(),
- initializeMessage: ()=>{
- if(props.value is incorrect) {
- setError(true)
- } else {
- setError(false)
- }
- }
- }));
- return(
- <div>
- <input
- ref={ref}
- value={props.value}
- />
- <Icon className={`iconClass ${error ? "errorIcon" : ""}`}>
- </div>
- );
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement