酶改变另一个输入字段

Question

我有一个简单的 React 组件，它有一个电子邮件输入字段和一个这样的复选框：

interface MyProps {
  onSubmit?: (form: any) => void;
}
class Preferences extends React.Component<MyProps> {
  state = {
    primaryEmailCheckbox: false,
    primaryEmail: "",
  };

  onPrimaryEmailChange = e => {
    this.setState({ primaryEmail: e.target.value });
    let checkbox = document.getElementById("primaryEmailCheckId") as HTMLInputElement;
      checkbox.disabled = false; //<<< checkbox is null. lets say this is line 18
    }
  }

  render() {
    return (
        <StaticContent />
          <h3>Email Address</h3>
          <div className="ui mini icon input">
            <input type="email" value={this.state.primaryEmail} placeholder="Enter email..." onChange={this.onPrimaryEmailChange} />
          </div>
          <div className="ui checkbox">
            <input type="checkbox" disabled={true} id="primaryEmailCheckId" onChange={e => this.setState({ primaryEmailCheckbox: e.target.checked })} /><label> Continue to receive further email communications from Us </label>
          </div>
    );
  }
}
export default Preferences;

当任何人在电子邮件字段中输入任何内容时，复选框变为可见，用户可以选中或保持未选中状态。 当我运行该应用程序时，它按预期工作。但是当我测试它时，它说复选框是空的（在第 18 行），所以你不能设置禁用它。 这是一个测试首选项组件的测试：

import * as React from "react";
import { shallow } from "enzyme";
import Preferences from "../../components/Preferences";

  test("Preferences shows email and checkbox", () => {
    const wrapper = shallow(<Preferences onSubmit={() => { }} />);
    wrapper.find("input").at(0).simulate("change", {
      target: {
        value: "a@b.c",
      }
    });
    expect(wrapper.find("input").state().value).toEqual("a@b.c");
  });

这会在第 18 行引发 Null 异常。问题是，值 a@b.c 被正确传递，我通过放置日志语句来验证它。 但是，当我尝试更改输入类型 email 的值时，它会调用一个 onChange 方法来尝试访问（并更改）另一个输入字段的值。

我不知道如何更改第二个输入类型的值，这是一个复选框。我怎样才能让它工作？任何帮助表示赞赏。

Answer 1

这是因为shallow(...) 渲染方法提供了一组有限的交互模式，而document.getElementById(...) 不是其中之一。您应该能够使用以下方法获得所需的内容：

const wrapper = mount(<Preferences />, { attachTo: document.body });

（Docs for the above code. 如果您使用类似 JSDOM 或类似的东西，您可以将 document.body 换成相关的等价物）。

也就是说...在 React 开发中完全使用 document.getElementById是一个巨大的危险信号。因为 React lets you interact with a virtual DOM 并处理将其应用于真实 DOM，所以自己摆弄真实的 DOM 是解决各种错误的好方法。一个更好的选择是 use refs 以“反应方式”访问复选框，或者只是将 checkboxEnabled: boolean 作为您的状态的一部分并在您的 onPrimaryEmailChange() 方法中更新它。