Question

我正在研究由一个主要组件：App.js（主要组件）和其他三个外部组件组成的React应用程序：Dog.js，DogItem.js，AddDog.js该应用程序包含一组项目（狗）：Dog.js，由单个dog元素，DogItem.js和一种形式：AddDog.js组成，以添加新项：dog。在AddDog.js文件中，我唯一不认识的行是：this.props.addDog（this.state.newDog）;我在下面突出了它。

我想在this.props.addDog（this.state.newDog）;中强调addDog；与组件AddDog的名称不同。

这是AddDog.js

import React, { Component } from 'react';

class AddDog extends Component {
  constructor() {
    super();
    this.state = {
      newDog:{}
    }
  }

  static defaultProps = {
    categories: ['Web Design', 'Web Development', 'Mobile Development']
  }

  handleSubmit(e) {
    if(this.refs.name.value === '') {
      alert('Title is required');
    } else if (this.refs.image.value === '') {
        alert('Image link is required');
    } else if (this.refs.breed.value === '') {
          alert('Breed is required');
    } else {
      this.setState({newDog:{
        name: this.refs.name.value,
        breed: this.refs.breed.value,
        image: this.refs.image.value
      }}, function() {
        this.props.addDog(this.state.newDog); // <<<<<<<<<<<<<<<<<
      });
    }
    e.preventDefault();
  }

  render() {
    return (
      <div>
        <h3 id="addDog">Add Dog</h3>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <div>
            <label>Name</label><br />
            <input id="dogName" type="text" ref="name" />
          </div>
          <div>
            <label>Image</label><br />
            <input id="imageURL" type="text" ref="image" />
          </div>
          <div>
            <label>Breed</label><br />
            <input id="dogBreed" type="text" ref="breed" />
          </div>
          <br />
          <input id="submitButton" type="submit" value="Submit" />
          <br />
        </form>
      </div>
    );
  }
}

export default AddDog;

这是App.js

import React, { Component } from 'react';
import Dogs from './components/Dogs';
import DogItem from './components/DogItem';
import AddDog from './components/AddDog';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      dogs: []
    };
  }

  getDogs() {
    var defaultDogs = {dogs: [
      {
        name: 'Princess',
        breed: 'Corgi',
        image: 'https://s-media-cache-ak0.pinimg.com/originals/51/ae/30/51ae30b78696b33a64661fa3ac205b3b.jpg'
      },
      {
        name: 'Riley',
        breed: 'Husky',
        image: 'http://portland.ohsohandy.com/images/uploads/93796/m/nice-and-sweet-siberian-husky-puppies-for-free-adoption.jpg'
      },
    ]}; 
    this.setState(defaultDogs);
  }

  componentWillMount() { // this soon display the two dogs before the render
    this.getDogs();  
  }

  handleAddDog(dog) {
    let dogs = this.state.dogs;
    dogs.push(dog);
    this.setState({dogs:dogs});
  }

  handleDeleteDog(name) {
    let dogs = this.state.dogs;
    let index = dogs.findIndex(x => x.name === name); // function (x) {return x.name === name} is like  x => x.name === name
    dogs.splice(index, 1);
    this.setState({dogs:dogs});
  }

  render() {
    return (
      <div className="App">
        <Dogs dogs={this.state.dogs} onDelete={this.handleDeleteDog.bind(this)} />
        <AddDog addDog={this.handleAddDog.bind(this)} />
        <hr />
      </div>
    );
  }
}

export default App;

这是Dog.js

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

class Dogs extends Component {
    deleteDog(name) {
        this.props.onDelete(name);
    }

    render() {
        let dogItem;
        if (this.props.dogs) {
            dogItem = this.props.dogs.map(dog => {
                return (
                    <DogItem onDelete={this.deleteDog.bind(this)} key={dog.name} dog={dog} />
                );
            });
        }
        return (
            <div className="Dogs">
                <h1>Good Dogs</h1>
                {dogItem}
            </div>
        );
    }
}

export default Dogs;

这是DogItem.js

import React, { Component } from 'react';

class DogItem extends Component {
  deleteDog(name) {
    this.props.onDelete(name);
  }

  render() {
    return (
      <ul className="Dog">
        <img src={this.props.dog.image} href={this.props.dog.image} role="presentation"  width="100" height="100"></img>
        <br></br>
        <strong>{this.props.dog.name}</strong>: {this.props.dog.breed} <a href="#" onClick={this.deleteDog.bind(this, this.props.dog.name)}>X</a>
        <br></br>
      </ul>
    );
  }
}

export default DogItem;

Answer 1

这是父组件的回调函数。（在这种情况下为App.js）它用于将新狗添加到处于应用状态的dogs数组中。

因此，当您调用函数INSERT Loan VALUE ('552-55-94354-34-4','301099-4448','25764510', '2019-01-01', NULL, '2019-02-01'); SELECT * FROM NotYetReturned; # The table doesn't contain the new insertion.时，它会调用父组件作为道具传递的函数（在App.js中为this.props.addDog(this.state.newDog)）

这意味着您致电<AddDog addDog={this.handleAddDog.bind(this)} />时， this.props.addDog(this.state.newDog)在App.js组件中以新的Dog Object作为参数被调用（this.handleAddDog()带有“ this.state”，它引用AddDog组件的状态）

我希望它足够详细和清楚；）

ReactJS：“ this.props.addDog（this.state.newDog）;”在此代码中是什么意思？

1 个答案: