1. 首页
  2. 问题
  3. 酶-如何访问和设置 值？
小编典典

酶-如何访问和设置 值？

reactjs

我对使用<input>时如何获取价值感到困惑mount。这是我的测试内容：

  it('cancels changes when user presses esc', done => {
    const wrapper = mount(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    console.log(input.render().attr('value'));
    input.simulate('focus');
    done();
  });

控制台将输出undefined。但是，如果我稍微修改一下代码，它就会起作用：

  it('cancels changes when user presses esc', done => {
    const wrapper = render(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    console.log(input.val());
    input.simulate('focus');
    done();
  });

当然，除了那input.simulate行因为我现在正在使用而失败render。我都需要正常工作。我该如何解决？

编辑 ：

我应该提到，<EditableText />不是受控组件。但是当我defaultValue进入时<input />，似乎设置了值。上面的第二个代码块确实打印出了该值，同样，如果我在Chrome中检查了输入元素并$0.value在控制台中键入，它将显示期望的值。


阅读 249

收藏
2020-07-22

共1个答案

小编典典

得到它了。（更新/改进版本）

  it('cancels changes when user presses esc', done => {
    const wrapper = mount(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    input.simulate('focus');
    input.simulate('change', { target: { value: 'Changed' } });
    input.simulate('keyDown', {
      which: 27,
      target: {
        blur() {
          // Needed since <EditableText /> calls target.blur()
          input.simulate('blur');
        },
      },
    });
    expect(input.get(0).value).to.equal('Hello');

    done();
  });
2020-07-22