javascript - React 从其他组件调用一个函数

Question

我是 ReactJS 的新手，我正在用 ReactJS 做一个简单的 CRUD。

我想在类 HeroModel 中的英雄列表中添加一个新英雄。但是我不知道如何从 AddHero.js 调用 HeroModel.js 中的 AddHero 函数。

这是我的代码:

英雄模型.js

import React, { Component } from 'react';

class HeroModel {

state = {
    Heroes: [
        { Id: 1, Name: "hero1", Dob: new Date("1-1-2017"), Stocked: true, Price: 1.50 },
        { Id: 2, Name: "hero2", Dob: new Date("5-31-2018"), Stocked: false, Price: 2.50 },
        { Id: 3, Name: "hero3", Dob: new Date("2019"), Stocked: true, Price: 3.50 },
        { Id: 4, Name: "hero4", Dob: new Date("4-20-2010"), Stocked: false, Price: 4.50 },
        { Id: 5, Name: "hero5", Dob: new Date("12-31-2018"), Stocked: true, Price: 5.50 },
    ]
}

GetAllHeroes() {
    return this.state.Heroes;
}

AddHero(name, dob, stocked, price) {
    let id = this.state.Heroes.length + 1;
    this.state.Heroes = [...this.state.Heroes,
    { Id: id, Name: name, Dob: dob, Stocked: stocked, Price: price }];
    }
}

export default HeroModel;

AddHero.js

import React, { Component } from 'react';
import HeroModel from './HeroModel';

class AddHero extends Component {

constructor(props) {
    super(props);

    this.state = {
        Id: 0, Name: "", Dob: new Date(), Stocked: true, Price: 0
    };

}

onNameChange(e) {
    this.setState({
        Name: e.target.value
    });
}

onDobChange(e) {
    this.setState({
        Dob: e.target.value
    });
}

onStockedChange(e) {
    this.setState({
        Stocked : e.target.value
    });
}

onPriceChange(e) {
    this.setState({
        Price : e.target.value
    });
}

onSave(e){
//----I get stuck here-----
//    (new HeroModel).AddHero(
//        this.state.Name, this.state.Dob, 
//        this.state.Stocked, this.state.Price);
}

render() {
    return (
        <div>
            <h1>Add hero</h1>
            <form>
                <div className="form-group">
                    <label>Name </label>
                    <input type="text" onChange={this.onNameChange.bind(this)}></input>
                </div>
                <div className="form-group">
                    <label>Dob </label>
                    <input type="date" onChange={this.onDobChange.bind(this)} defaultValue={new Date().toISOString().substr(0, 10)}></input>
                </div>
                <div className="form-group">
                    <label>Stocked </label>
                    <input type="checkbox" onChange={this.onStockedChange.bind(this)} ></input>
                </div>
                <div className="form-group">
                    <label>Price </label>
                    <input type="text" onChange={this.onPriceChange.bind(this)}></input>
                </div>
                <button onClick={this.onSave.bind(this)}>Save</button>
            </form>
        </div>
    );
}
}

export default AddHero;

请帮我在 HeroMode.js 的英雄列表中添加一个新英雄。我在函数 onSave(e) 中遇到问题时发表评论。

先谢谢你。

Answer 1

编辑，对于 redux 实现，请参阅此沙箱:https://codesandbox.io/s/simple-reactredux-flow-l9oq4

要调用另一个函数中定义的函数，您需要将其作为属性传递下去。这将创建父子关系。

让我们考虑以下几点:

1. 您的父组件在其状态下保存 Heroes 列表。
2. 您的父组件有一个功能可以让您添加更多英雄。我们将调用它 createNewHero()
3. 您的父组件将 createNewHero() 作为 prop 传递给 child ，AddHero
4. AddHero 将输入数据保存在其state 中，我们将该数据作为对象传递给 prop，createNewHero()。有效向上传递数据。
5. 当调用createNewHero()时，其执行上下文绑定(bind)到父组件。所以当this.setState()被执行时，关键字this指向HeroModel的状态。
6. 完成后，我们将单个 Hero 添加到列表中，从而更改状态，导致我们的组件重新呈现。

检查以下沙盒以查看实际效果:https://codesandbox.io/s/frosty-dawn-l9oq4

英雄模型(父级)

import React from "react";
import ReactDOM from "react-dom";
import AddHero from "./AddHero";

import "./styles.css";

class HeroModel extends React.Component {
  state = {
    Heroes: [
      {
        Id: 1,
        Name: "hero1",
        Dob: new Date("1-1-2017"),
        Stocked: true,
        Price: 1.5
      },
      {
        Id: 2,
        Name: "hero2",
        Dob: new Date("5-31-2018"),
        Stocked: false,
        Price: 2.5
      },
      {
        Id: 3,
        Name: "hero3",
        Dob: new Date("2019"),
        Stocked: true,
        Price: 3.5
      },
      {
        Id: 4,
        Name: "hero4",
        Dob: new Date("4-20-2010"),
        Stocked: false,
        Price: 4.5
      },
      {
        Id: 5,
        Name: "hero5",
        Dob: new Date("12-31-2018"),
        Stocked: true,
        Price: 5.5
      }
    ]
  };

  createNewHero = newHero => {
    this.setState({
      ...this.state,
      Heroes: [...this.state.Heroes, newHero]
    });
  };

  renderHeros = () => {
    const { Heroes } = this.state;

    return Heroes.map(hero => {
      return <div>{hero.Name}</div>;
    });
  };

  render() {
    return (
      <div>
        {this.renderHeros()}
        <AddHero createNewHero={this.createNewHero} />
      </div>
    );
  }
}
export default HeroModel;

AddHero( child )

import React from "react";

class AddHero extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Id: 0,
      Name: "",
      Dob: new Date(),
      Stocked: true,
      Price: 0
    };
  }

  onSave = e => {
    e.preventDefault();
    const { Id, Name, Stocked, Price } = this.state;
    const newHero = {
      Id: Id,
      Name: Name,
      Dob: new Date(),
      Stocked: Stocked,
      Price: Price
    };

    this.props.createNewHero(newHero);
  };

  onChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  render() {
    return (
      <div>
        <h1>Add hero</h1>
        <form>
          <div className="form-group">
            <label>Name </label>
            <input type="text" onChange={this.onChange} name="Name" />
          </div>
          <div className="form-group">
            <label>Dob </label>
            <input
              type="date"
              onChange={this.onChange}
              defaultValue={new Date().toISOString().substr(0, 10)}
              name="Dob"
            />
          </div>
          <div className="form-group">
            <label>Stocked </label>
            <input type="checkbox" onChange={this.onChange} name="Stocked" />
          </div>
          <div className="form-group">
            <label>Price </label>
            <input type="text" onChange={this.onChange} name="Price" />
          </div>
          <button onClick={this.onSave}>Save</button>
        </form>
      </div>
    );
  }
}

export default AddHero;