我想理解为什么教授在一种语法中使用两个自变量括号

Question

我实际上正在研究与酶结合的酶，以测试应用程序中的内容。我正在使用的其他东西是反应和时刻。

我的问题可能是非常菜鸟，但是我只想知道为什么这行上有两个参数：

wrapper.find('SingleDatePicker').prop('onFocusChange')({ focused });

是这个的'公式'，这个：objectExample.methodExample('argument1')('argument2');吗？

我将在下面分成两部分的整个代码下面提供：测试代码和测试的代码。

已测试代码：

export default class ExpenseForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      calendarFocused: false,
    };
  }
  onFocusChange = ({ focused }) => {
    this.setState(() => ({ calendarFocused: focused }));
  };
  render() {
    return (
      <div>
        {this.state.error && <p>{this.state.error}</p>}
        <form onSubmit={this.onSubmit}>
          <SingleDatePicker
            date={this.state.createdAt}
            onDateChange={this.onDateChange}
            focused={this.state.calendarFocused}
            onFocusChange={this.onFocusChange}
            numberOfMonths={1}
            isOutsideRange={() => false}
          />
        </form>
      </div>
    )
  }
}

测试代码：

test('should set calendar focus on change', () => {
  const focused = false;
  const wrapper = shallow(<ExpenseForm />);
  wrapper.find('SingleDatePicker').prop('onFocusChange')({ focused });
  expect(wrapper.state('calendarFocused')).toBe(focused);
});

因此，基本上，我可以理解代码本身的所有功能以及所有内容。

我只是不理解第二个参数({ focused })。

我什至不知道这是否被称为“参数”。

我做了一些调整，将其从代码中删除，并且以相同的方式工作。

如果这是普通的javascript或我正在使用的这些库之一，我会感到困惑。

...

我期望：回答这是什么东西，为什么要像这样使用它。某些名称来源或我可以浏览并学到的东西。

Answer 1

[wrapper.find('SingleDatePicker').prop('onFocusChange')返回一个函数。

此功能实际上是：

onFocusChange = ({ focused }) => {
    this.setState(() => ({ calendarFocused: focused }));
};

即您在组件中创建的一个。

现在可以执行此功能：

wrapper.find('SingleDatePicker').prop('onFocusChange')({ focused });

或

const onFocusChangeFn = wrapper.find('SingleDatePicker').prop('onFocusChange');
onFocusChangeFn({ focused });

---

通常，如果您有类似的东西：

const myObject = {
    getFunction: function(y) {
        return function(x) {
            console.log(y, x);
        }
    }
}

然后您可以做：

myObject.getFunction(10)(20) // prints (10,20)

其中myObject.getfunction(10)将返回您可以使用示例中的任何参数（例如20）调用的内部函数。

返回功能对于currying和partial functions等各种目的很有用

Answer 2

所以我知道我可以调用上一个示例中提到的内部函数。那个例子：

const onFocusChangeFn = wrapper.find('SingleDatePicker').prop('onFocusChange');
onFocusChangeFn({ focused });

是开玩笑的文件建议

const mockFn = jest.fn();
mockFn(); 
expect(mockFn).toHaveBeenCalled();

这在我心中非常清楚。问题是当我得到这样的一段代码时：

  test('should handle date changes', () => {
  const startDate = moment(0).add(2, 'days');
  const endDate = moment(0).add(3, 'days');
  wrapper.find('DateRangePicker').prop('onDatesChange')({ startDate, endDate });
  expect(setStartDate).toHaveBeenLastCalledWith(startDate);
  expect(setEndDate).toHaveBeenLastCalledWith(endDate);
});

会这样吗？：

(...)
const wrapperFn  = wrapper.find('DateRangePicker').prop('onDatesChange');
wrapperFn({ startDate, endDate });

我正在进行研究，发现另一件事与同一主题有关，但又有所不同。

test('should sort by date', () => {
  const value = 'date';
  wrapper.find('select').simulate('change', { target: { value } });
  expect(sortByDate).toHaveBeenCalled();
});

他在Simulate（）参数内定义了'e'事件的目标值。这也可以单独定义吗？像这样：

test('should sort by date', () => {
  const value = 'date';
  const wrapperFn = wrapper.find('select').simulate('change')
  wrapperFn({ target: { value } });
  expect(sortByDate).toHaveBeenCalled();
});

或者它们是完全不同的东西？

下面，我将提供我正在测试的完整代码

import React from 'react';
import { connect } from 'react-redux';
import { DateRangePicker } from 'react-dates';
import { setTextFilter, sortByDate, sortByAmount, setStartDate, setEndDate } from '../actions/filters';

export class ExpenseListFilters extends React.Component {
  state = {
    calendarFocused: null
  };
  onDatesChange = ({ startDate, endDate }) => {
    this.props.setStartDate(startDate);
    this.props.setEndDate(endDate);
  };
  onFocusChange = (calendarFocused) => {
    this.setState(() => ({ calendarFocused }));
  }
  onTextChange = (e) => {
    this.props.setTextFilter(e.target.value);
  };
  onSortChange = (e) => {
    if (e.target.value === 'date') {
      this.props.sortByDate();
    } else if (e.target.value === 'amount') {
      this.props.sortByAmount();
    }
  };
  render() {
    return (
      <div>
        <input
          type="text"
          value={this.props.filters.text}
          onChange={this.onTextChange}
        />
        <select
          value={this.props.filters.sortBy}
          onChange={this.onSortChange}
        >
          <option value="date">Date</option>
          <option value="amount">Amount</option>
        </select>
        <DateRangePicker
          startDate={this.props.filters.startDate}
          endDate={this.props.filters.endDate}
          onDatesChange={this.onDatesChange}
          focusedInput={this.state.calendarFocused}
          onFocusChange={this.onFocusChange}
          showClearDates={true}
          numberOfMonths={1}
          isOutsideRange={() => false}
        />
      </div>
    );
  }
};

const mapStateToProps = (state) => ({
  filters: state.filters
});

const mapDispatchToProps = (dispatch) => ({
  setTextFilter: (text) => dispatch(setTextFilter(text)),
  sortByDate: () => dispatch(sortByDate()),
  sortByAmount: () => dispatch(sortByAmount()),
  setStartDate: (startDate) => dispatch(setStartDate(startDate)),
  setEndDate: (endDate) => dispatch(setEndDate(endDate))
});

export default connect(mapStateToProps, mapDispatchToProps)(ExpenseListFilters);

灯具：

import moment from 'moment';

const filters = {
  text: '',
  sortBy: 'date',
  startDate: undefined,
  endDate: undefined
};

const altFilters = {
  text: 'bills',
  sortBy: 'amount',
  startDate: moment(0),
  endDate: moment(0).add(3, 'days')
};

export { filters, altFilters };

感谢您的帮助。