score:0

export class profileDetail extends Component {
    continue = (e) => {
        e.preventDefault();
        this.props.nextStep();
        imageHandler = imageHandler.bind(this);
    };

    back = (e) => {
        e.preventDefault();
        this.props.prevStep();
    };
   const imageHandler = () => {

        //Do this thing..
        //make this magic happen...

        //and then call outer handler
        this.props.handleChange('ProfilePic');
    };
    render() {
        const { values } = this.props;

        return (
            <div>
                Add your Profile Picture:
                <input
                    defaultValue={values.ProfilePic}
                    onChange={imageHandler}
                    type="file"
                    name="inpFile"
                    id="inpFile"
                    accept="image/*"
                />
            </div>
        );
    }
}

score:0

<input
  onChange={() => {
    handleChange('ProfilePic');
    imageHandler();
  }}
  defaultValue={values.ProfilePic}
  type="file"
  name="inpFile"
  id="inpFile"
  accept="image/*"/>

score:0

<input
  onChange={() => {
    handleChange('ProfilePic');
    imageHandler();
  }}
  {...props}
/>

score:0

export class profileDetail extends Component {
   continue = (e) => {
     e.preventDefault();
     this.props.nextStep();
   };

   back = (e) => {
    e.preventDefault();
    this.props.prevStep();
   };

   const commonHandleChange = () => {
       // You can add conditions on which you want to execute both functions here, if you want to execute both function together.
       handleChange('ProfilePic');
       imageHandler();
   };
   render() {
      const { values } = this.props;

      return (
        <div>
            Add your Profile Picture:
            <input
                defaultValue={values.ProfilePic}
                onChange={commmonHandleChange}
                type="file"
                name="inpFile"
                id="inpFile"
                accept="image/*"
            />
        </div>
      );
  }
}

score:1

export class ProfileDetails extends Component {

  imageHandler = () => {
    /* ... */
  };

  onChange = () => {
    this.imageHandler();
    this.props.handleChange("ProfilePic");
  };

  render() {
    const { values } = this.props;

    return (
      <input
        onChange={this.onChange}
        defaultValue={values.ProfilePic}
        type="file"
        name="inpFile"
        id="inpFile"
        accept="image/*"
      />
    );
  }
}


Related Query

More Query from same tag