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

Question

在 ReactJS 中，希望从函数中获得一个组件，并在发布表单时发送对函数的调用。 这个例子不起作用。 如何修复？

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

我认为您的代码有几个问题。

1. 您可能想要导出您的AddPhoto组件而不是您的handleSubmit函数。 假设您的文件仅导出您的AddPhoto组件，您不必声明一个常量，您可以直接导出默认的AddPhoto函数。
2. 我实际上没有看到导出handleSubmit函数的原因。 因此，我将在您的AddPhoto组件中包含该函数。
3. 您的this.handleSubmit函数中有一个- ，功能组件也不必使用this ，而且您的handleSubmit函数不在您的功能组件范围内。 所以它不会工作。
4. 您可能不需要. 在您的输入className道具中也是如此。
5. 我已经格式化了您的代码以使其看起来更干净:)

以下是代码供您参考。

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. 从你的 handleSubmit 中删除this ，因为它是在外面声明的。

2. 如果您在同一文件中声明函数，请删除export 。 否则，您必须在单独的文件中定义您的函数，然后从那里导入。

    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

您的代码有很多问题：

1. 该按钮上没有 type="submit"，因此它在按下时甚至不会提交表单。
2. HandleSubmit 是一个特定于 AddPhoto 的函数，所以它应该在 AddPhoto 组件中。 （在这种情况下我也喜欢使用箭头函数，因为它应该是一个匿名函数）。
3. 没有必要使用this因为首先this关键字仅在类中用于将函数绑定到类。 因此，因为 AddPhoto 是一个函数组件，所以您不必将该函数绑定到该类。
4. 您应该添加event.preventDefault(); ，否则页面将重新加载（以提交表单）并且您将丢失您的应用程序状态。

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

尝试这个：

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

我认为你应该需要写一些像......

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: ()=>{}

}