Question

如何根据api响应在子组件中执行父组件的功能？

父母：

import React from 'react';
import AjaxForm from './../AjaxForm'

const Add = () => {

    const AddCommentDone=()=>{
        console.log('Done')
    }

    const AddCommentFail=()=>{
        console.log('Failed')
    }
    return (
        <AjaxForm api='/api/Comment/Add'>
            <input name='Comment' placeholder='Text' type='text'></input>
        </AjaxForm>
    )
}

export default Add

孩子：

import React from 'react';
import axios from 'axios';

const AjaxForm = (props) => {

    const handleSubmit=(e)=>{
        axios.post(props.api, new FormData(e.target))
        .then(function (response) {
            console.log(response.data) //Api Response=> {message:'Thank you for your comment',callBack:'AddCommentDone'}
            //run callback of api response on Parent
          });
    }
    return (
        <form onSubmit={handleSubmit}>
            {props.children}
            <button type='submit'>Submit</button>
        </form>
    )
}

export default AjaxForm

如何使用api响应对象中的函数名称在父级中运行它？

Answer 1

孩子应该是：

import React from 'react';
import axios from 'axios';

const AjaxForm = (props) => {

    const handleSubmit=(e)=>{
        axios.post(props.api, new FormData(e.target))
        .then(function (response) {
            console.log(response.data) //Api Response=> {message:'Thank you for your comment',callBack:'AddCommentDone'}
            props.onSuccess(response.data)
          });
    }
    return (
        <form onSubmit={handleSubmit}>
            {props.children}
            <button type='submit'>Submit</button>
        </form>
    )
}

export default AjaxForm

父母：

import React from 'react';
import AjaxForm from './../AjaxForm'

const Add = () => {

    const AddCommentDone=(data)=>{
        console.log('Done', data)
    }

    const AddCommentFail=()=>{
        console.log('Failed')
    }

    return (
        <AjaxForm api='/api/Comment/Add' onSuccess={AddCommentDone}>
            <input name='Comment' placeholder='Text' type='text'></input>
        </AjaxForm>
    )
}

export default Add

Answer 2

这是您可以执行的操作。正如@ Jayce444指出的那样，您可以将要调用的函数作为道具传递。

import React from "react";
import AjaxForm from "./../AjaxForm";

const Add = () => {
  const AddCommentDone = () => {
    console.log("Done");
  };

  const AddCommentFail = () => {
    console.log("Failed");
  };
  return (
    <AjaxForm api="/api/Comment/Add" onCommentDone={AddCommentDone}>
      <input name="Comment" placeholder="Text" type="text"></input>
    </AjaxForm>
  );
};

export default Add;

然后：

import React from "react";
import axios from "axios";

const AjaxForm = (props) => {
  const handleSubmit = (e) => {
    axios.post(props.api, new FormData(e.target)).then(function (response) {
      console.log(response.data); //Api Response=> {message:'Thank you for your comment',callBack:'AddCommentDone'}
      //run callback of api response on Parent
      props.onCommentDone(response.data);
    });
  };
  return (
    <form onSubmit={handleSubmit}>
      {props.children}
      <button type="submit">Submit</button>
    </form>
  );
};

export default AjaxForm;

Answer 3

将所需的父组件作为道具传递给子组件。父母：

import React from 'react';
import AjaxForm from './../AjaxForm'

const Add = () => {

    const AddCommentDone=()=>{
        console.log('Done')
    }

    const AddCommentFail=()=>{
        console.log('Failed')
    }
    return (
        <AjaxForm 
            api='/api/Comment/Add'
            AddCommentDone={AddCommentDone}
            AddCommentFail={AddCommentFail} >
            <input name='Comment' placeholder='Text' type='text'></input>
        </AjaxForm>
    )
}

export default Add

然后在孩子里

import React from 'react';
import axios from 'axios';

const AjaxForm = (props) => {

    const handleSubmit=(e)=>{
        axios.post(props.api, new FormData(e.target))
        .then(function (response) {
            console.log(response.data) //Api 
              Response=> {message:'Thank you for your comment',callBack:'AddCommentDone'}
              Response.callBack === 'AddCommentDone' ? props.AddCommentDone : props.AddCommentFail;
          });
    }
    return (
        <form onSubmit={handleSubmit}>
            {props.children}
            <button type='submit'>Submit</button>
        </form>
    )
}

export default AjaxForm

在子组件React中调用父方法

3 个答案: