javascript - 出于测试目的，我应该避免使用有利于 e.target 的 refs 吗？

Question

我经常写这样的组件:

<input
    ref="ckbx"
    type="checkbox"
    checked={this.props.checked}
    onChange={() => this.props.onChange(this.refs.ckbx.checked)}
/>

但是，我现在发现这很难进行单元测试。特别是，当使用 Simulate.change 或 Simulate.click 时，回调将传递复选框的初始值而不是新值(就像在浏览器中发生的那样) .当我将 { target: { checked: false } } 作为每个 Simulate 调用的第二个参数时，此行为仍然存在。

如果我改为使用它会起作用

<input
    type="checkbox"
    checked={this.props.checked}
    onChange={e => this.props.onChange(e.target.checked)}
/>

所以，我的问题是

• 这是编写输入逻辑的首选方式吗？
• 这是编写输入逻辑的唯一单元测试方式吗？它似乎真的不那么灵活(如果我需要考虑多个 refs 怎么办？)。
• 我可以使用我现有的方法吗？
• 我应该更换所有组件吗？(不难，但如果有更好的方法，我不想做。)

Answer 1

正如您在 React docs 中看到的那样他们只使用 e.target 而我也总是使用带有 e.target 的输入。我强烈建议你尽可能避免在 React 中使用 refs。首先，因为 React 团队称其为“逃生舱口”。此外 - https://facebook.github.io/react/docs/more-about-refs.html#summary

通过使用 e.target，您可以模拟事件，它应该可以完美运行。