how to add two onChange in reactjs with workinng input-CodePudding

so this is hard to explain, i am building a instagram clone and i have this input tag inside formik, it is used to enter the url of the image a person wants to upload, its on Change property is already being used but i need another on Change property to upload the url i recieve in the input text. code:

          import React from "react";
      import "./formikpostup.css";
      import { Formik } from "formik";
      import * as Yup from "yup";
      import Divider from "../homepage/divider";

      export default class FormikPostupload extends React.Component {
        constructor() {
          super();
          this.state = {
            thumbnail:
              "https://getstamped.co.uk/wp-content/uploads/WebsiteAssets/Placeholder.jpg"
          };
        }

        render() {
          const uploadPostScheme = Yup.object().shape({
            imageUrl: Yup.string().url().required("A url is required"),
            caption: Yup.string().max(
              200,
              "Caption has reached the maximum character limit"
            )
          });
          const placeholderimg =
            "https://getstamped.co.uk/wp-content/uploads/WebsiteAssets/Placeholder.jpg";

          return (
            <Formik
              initialValues={{ caption: "", imageUrl: "" }}
              onSubmit={(values) => console.log(values)}
              validationSchema={uploadPostScheme}
            >
              {({
                handleBlur,
                handleChange,
                handleSubmit,
                values,
                errors,
                isValid
              }) => {
                const urllistner = (e) => {
                  this.setState({ thumbnail: e.nativeEvent.key });
                };

                return (
                  <div>
                    <div className="cont">
                      <div>
                        <img
                          alt=""
                          src={this.thumbnail ? this.thumbnail : placeholderimg}
                          width="100px"
                          height="100px"
                        />
                        <textarea
                          placeholder="Write A Caption"
                          className="input-caption"
                          onChange={handleChange("caption")}
                          onBlur={handleBlur("caption")}
                          value={values.caption}
                        ></textarea>
                      </div>
                      <div className="new-post-bottom">
                        <Divider />
                        <input
                          onKeyDown={(e) => urllistner(e)}
                          /*onKeyDown does not work i need another onchange */
                          className="input-image"
                          placeholder="Enter Image Url"
                          onChange={handleChange("imageUrl")}
                          onBlur={handleBlur("imageUrl")}
                          value={values.imageUrl}
                        ></input>
                        {errors.imageUrl && (
                          <div className="image-url-error">{errors.imageUrl}</div>
                        )}
                      </div>
                    </div>
                    <button
                      type="submit"
                      className="share-button-newpost"
                      onClick={handleSubmit}
                      disabled={!isValid}
                    >
                      Share
                    </button>
                  </div>
                );
              }}
            </Formik>
          );
        }
      }

NOTE::: Is there a way to import onChangeText property of react native to react js?? this will answer my question if it is possible

CodePudding user response：

Front what I understood, you need to execute another function onChange besides the formik handleChange method.

You can define another method, and execute both together inside the same event listener

onChange={() => {
  handleChange("imageUrl")
  uploadFile();
}

Full example of code.

      import React from "react";
      import "./formikpostup.css";
      import { Formik } from "formik";
      import * as Yup from "yup";
      import Divider from "../homepage/divider";

      export default class FormikPostupload extends React.Component {
        constructor() {
          super();
          this.state = {
            thumbnail:
              "https://getstamped.co.uk/wp-content/uploads/WebsiteAssets/Placeholder.jpg"
          };
        }

        render() {
          const uploadPostScheme = Yup.object().shape({
            imageUrl: Yup.string().url().required("A url is required"),
            caption: Yup.string().max(
              200,
              "Caption has reached the maximum character limit"
            )
          });
          const placeholderimg =
            "https://getstamped.co.uk/wp-content/uploads/WebsiteAssets/Placeholder.jpg";

          const uploadFile = () => {
             // Add upload functionality here.
          }
          return (
            <Formik
              initialValues={{ caption: "", imageUrl: "" }}
              onSubmit={(values) => console.log(values)}
              validationSchema={uploadPostScheme}
            >
              {({
                handleBlur,
                handleChange,
                handleSubmit,
                values,
                errors,
                isValid
              }) => {
                const urllistner = (e) => {
                  this.setState({ thumbnail: e.nativeEvent.key });
                };

                return (
                  <div>
                    <div className="cont">
                      <div>
                        <img
                          alt=""
                          src={this.thumbnail ? this.thumbnail : placeholderimg}
                          width="100px"
                          height="100px"
                        />
                        <textarea
                          placeholder="Write A Caption"
                          className="input-caption"
                          onChange={handleChange("caption")}
                          onBlur={handleBlur("caption")}
                          value={values.caption}
                        ></textarea>
                      </div>
                      <div className="new-post-bottom">
                        <Divider />
                        <input
                          onKeyDown={(e) => urllistner(e)}
                          /*onKeyDown does not work i need another onchange */
                          className="input-image"
                          placeholder="Enter Image Url"
                          onChange={() => {
                             handleChange("imageUrl")
                             uploadFile();
                          }
                          onBlur={handleBlur("imageUrl")}
                          value={values.imageUrl}
                        ></input>
                        {errors.imageUrl && (
                          <div className="image-url-error">{errors.imageUrl}</div>
                        )}
                      </div>
                    </div>
                    <button
                      type="submit"
                      className="share-button-newpost"
                      onClick={handleSubmit}
                      disabled={!isValid}
                    >
                      Share
                    </button>
                  </div>
                );
              }}
            </Formik>
          );
        }
      }

CodePudding user response：

React onChange accepts a function, which in turn accepts an event as an argument but if you directly pass it a function like this:

onChange={handleChange}

It will assume handleChange accepts an event as an argument. Ideally you'd have defined this like so:

const handeChange = (event) => {
    // Extract string from event.target.value and do something...
}

In this case, since you're trying to do multiple things simultaneously, pass onChange an intermediary function that intercepts the input like so:

onChange={(event) => {
    handleChange(event.target.value);
    yourOtherFunction();
}}

Of cource, handleChange in the above case will be accepting a string, not an event.