如何在基于函数的 ReactJS 组件中调用函数？

Question

In ReactJS would like to have a component from a function, and send a call to a function when a form is posted. This example doesn't work. How can be fixed?

import React from 'react';
import Link from "react-router-dom/Link";

function AddPhoto(props) {

    return (<div>
        <h1>Pickture</h1>
        <Link className='cancelIcon' to="/"> </Link>
        <div>
            <form className="form" onSubmit={e => this.handleSubmit(e)}>
                <input className='.form input' type='text' placeholder='Link' name='link'/>
                <input className='.form input' type='text' placeholder='Description' name='description'/>
                <button> post</button>
            </form>
        </div>
    </div>)

}
export function handleSubmit(event) {
    console.log("Form has been submitted");
    console.log(event.target.element.link.value);
}

Answer 1

I think there are several issues with your code.

1. You probably want to export your AddPhoto component instead of your handleSubmit function. Assuming that your file is only exporting your AddPhoto component, you don't have to declare a constant and you can straightaway export default your AddPhoto function.
2. I actually don't see the reason to export your handleSubmit function. So I will include that function inside your AddPhoto component.
3. There is a - in your this.handleSubmit function, also functional component don't have to use this , furthermore your handleSubmit function is not within your functional component's scope. So it won't work.
4. You probably don't need the . in your input className props as well.
5. I've formatted your code to make it look cleaner :)

Here are the codes for you to refer.

const AddPhoto = (props) => {
  const handleSubmit = (event) => {
    // Add this if you want to prevent the page from reloading and updating your url
    event.preventDefault();
    console.log("Form has been submitted");
    // Assuming you want to get the `link` field's value, you can get it by using this
    console.log(event.target.link.value);
  }
  return (
    <div>
      <h1>Pickture</h1>
      <Link className="cancelIcon" to="/">
        {" "}
      </Link>
      <div>
        <form className="form" onSubmit={handleSubmit}>
          <input
            className="form input"
            type="text"
            placeholder="Link"
            name="link"
          />
          <input
            className="form input"
            type="text"
            placeholder="Description"
            name="description"
          />
          <button type="submit">post</button>
        </form>
      </div>
    </div>
  );
}

export default AddPhoto;

Answer 2

1. Remove this from your handleSubmit since it's declared outside.

2. Remove export if you're declaring the function in the same file. Otherwise, you would have to define your function in a separate file and then import from there.

    function AddPhoto(props) { return (<div> <h1>Pickture</h1> <Link className='cancelIcon' to="/"> </Link> <div> {/* Removed this.*/} <form className="form" onSubmit={e => handleSubmit(e)}> <input className='.form input' type='text' placeholder='Link' name='link'/> <input className='.form input' type='text' placeholder='Description' name='description'/> <button> post</button> </form> </div> </div>) } // Removed export function handleSubmit(event) { console.log("Form has been submitted"); console.log(event.target.element.link.value); }

Answer 3

There are quite some issue with your code:

1. The button doesn't have a type=“submit” on it, so therefor it won't even submit the form when pressed.
2. HandleSubmit is an function specific to AddPhoto, so it should be inside the AddPhoto component. (I also like to use an arrow function in this case because it should be an anonymous function).
3. There is no need the use this because first of all this keyword is only used in classes to bind functions to the class. So because AddPhoto is an functional component, you don't have to bind the function to the class.
4. You should add event.preventDefault(); , because otherwise the page will reload (to submit the form) and you will lose your state of your application.

import React from 'react';
import Link from 'react-router-dom/Link';

export default function AddPhoto() {
  const handleSubmit = event => {
    event.preventDefault();

    const link = event.target.link;
    const description = event.target.description;

    console.log('Form has been submitted');
  };

  return (
    <div>
      <h1>Picture</h1>
      <Link className="cancelIcon" to="/">
        cancel
      </Link>
      <div>
        <form className="form" onSubmit={handleSubmit}>
          <input
            className="form-input"
            type="text"
            placeholder="Link"
            name="link"
            ref={linkInput}
          />
          <input
            className="form-input"
            type="text"
            placeholder="Description"
            name="description"
            ref={descriptionInput}
          />
          <button type="submit">post</button>
        </form>
      </div>
    </div>
  );
}

Answer 4

Try this:

import React from 'react';
import Link from "react-router-dom/Link";

export function AddPhoto(props) {

    return (<div>
        <h1>Pickture</h1>
        <Link className='cancelIcon' to="/"> </Link>
        <div>
            <form className="form" onSubmit={handleSubmit}>
                <input className='.form input' type='text' placeholder='Link' name='link'/>
                <input className='.form input' type='text' placeholder='Description' name='description'/>
                <button> post</button>
            </form>
        </div>
    </div>)

}

function handleSubmit(event) {
    console.log("Form has been submitted");
    console.log(event.target.element.link.value);
}

Answer 5

I think you should be needing to write something like ...

import React from 'react';
import Link from "react-router-dom/Link";

export const AddPhoto = props => {

const handleSubmit = e =>{
return(
    console.log("Form has been submitted");
    console.log(e.target.element.link.value);
)
}

    return (<div>
        <h1>Pickture</h1>
        <Link className='cancelIcon' to="/"> </Link>
        <div>
            <form className="form" onSubmit={e => handleSubmit(e)}>
                <input className='.form input' type='text' placeholder='Link' name='link'/>
                <input className='.form input' type='text' placeholder='Description' name='description'/>
                <button> post</button>
            </form>
        </div>
    </div>)

}

AddPhoto.defaultProps = {

onSubmit: ()=>{}

}