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;

当任何人在电子邮件字段中输入任何内容时，该复选框将变为可见，以供用户检查或保留未选中状态。当我运行该应用程序时，它可以按预期工作。但是，当我对其进行测试时，它说checkbox为null（在第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，我通过放置日志语句对其进行了验证。但是，当我尝试更改输入类型的电子邮件的值时，它将调用一个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()方法中对其进行更新。

酶改变另一个输入字段

1 个答案: