1

我在学校考试的一部分中处于最后一个规范。

select 应该有一个 onChange 事件来提交新的动物

本质上，我似乎无法将handleSubmit函数传递给孩子，以响应变化......这是规范的其余部分。

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;
 });

这是父组件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(The child of Exhibit) 组件：

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

有任何想法吗？

4

1 回答 1

1

在这里，您将事件处理程序设置为返回对函数的引用的匿名函数：

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

您可能打算更像这样：

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

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

于 2017-12-02T21:16:55.150 回答