处理程序在 React 的 child 组件中未按预期工作

Question

我在学校测试的最后一个规格上。

select should have an onChange event that submits the new animal

基本上我似乎无法将 handleSubmit 函数传递给 child，以响应更改... 这是规范的其余部分。

it('select should have an onChange event that submits the new animal', () => {
  expect(animalSelect.props('select').onChange).to.be.function;

  // choosing a random animal
  let animal = getRandomAnimal();

   // simulating a 'change' event with an event described as the second argument given to `simulate`
   animalSelect.find('select').simulate('change', { target: { value: animal } });

   // the spy sent in should be called with the argument described
   expect(setAnimalSpy.calledWith(animal)).to.be.true;
 });

这是 parent 组件 Exhibit:

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

export default class Exhibit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedAnimal: this.props.selectedAnimal,
    };
    this.setAnimal = this.setAnimal.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  setAnimal(animal) {
    this.setState({ selectedAnimal: animal });
  }

  handleSubmit(event) {
    this.setState({ selectedAnimal: event.target.value });
  }

  render() {
    const { selectedAnimal } = this.state;
    return (
      <div className="exhibit">
        <AnimalSelect handleSubmit={this.handleSubmit} submitAnimal={this.setAnimal} animals={this.props.animals} />
        <Cage selectedAnimal={selectedAnimal} />
      </div>
    );
  }
}

这是 AnimalSelect（Exhibit 的 child）组件：

import React, { Component } from 'react';

// exporting the constructor function (dumb component).
// what is the parameter coming in here?
export default function AnimalSelect(props) {
  // prettier-ignore
  return (
    <form>
      <label>Select an Animal: </label>
      <select onChange={() => props.handleSubmit}>
        {props.animals.map((animal, index) => {
          return (
            <option key={animal} value={animal}>
              {animal}
            </option>
          );
        })}
      </select>;
    </form>
  );
}

不幸的是，这是我遇到的唯一错误。

    AssertionError: expected false to be true

有什么想法吗？

Answer 1

在这里，您将事件处理程序设置为一个匿名函数，其中 returns 对函数的引用：

<select onChange={() => props.handleSubmit}>

您可能打算更像这样：

<select onChange={evt => props.handleSubmit(evt)}>

这有效地将事件处理程序委托给父组件的函数，将事件对象传递给它。虽然我不确定为什么按照评论中的建议设置处理程序不起作用。

处理程序在 React 的 child 组件中未按预期工作

Handler not working as expected in child component in React

javascript

reactjs

react-props