加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – 使用React TestUtils模拟选择选项

发布时间:2020-12-15 20:51:32 所属栏目:百科 来源:网络整理
导读:我有以下React组件,我想在TestUtils的select块中选择一个selectElements.我怎么做? var selectElements = ["type_a","type_b"];var SelectElement = React.createClass({ render: function() { return ( option value={this.props.type}{this.props.type}/o
我有以下React组件,我想在TestUtils的select块中选择一个selectElements.我怎么做?
var selectElements = ["type_a","type_b"];

var SelectElement = React.createClass({
  render: function() {
    return (
      <option value={this.props.type}>{this.props.type}</option>
      );
  }
});

var MyForm = React.createClass({
  handleSubmit: function(e) {
    console.log("submitted");
  },render: function () {
    var selectElements = this.props.availableTypes.map(function (type) {
      return (
        <SelectElement key={type} type={type} />
        );
    });
    return (
      <form role="form" onSubmit={this.handleSubmit}>
        <select ref="type" name="type">
          <option value="">-- Choose --</option>
          {selectElements}
        </select>
        <input type="submit" value="Search"/>
      </form>
      );
  }
});

我已经尝试过这样做:

var myFormComponent = TestUtils.renderIntoDocument(<MyForm selectElements={selectElements} />);
var form = TestUtils.findRenderedDOMComponentWithTag(myFormComponent,'form');
var selectComponent = TestUtils.findRenderedDOMComponentWithTag(form,'select');

TestUtils.Simulate.change(selectComponent,{ target: { value: 'type_a' } });
TestUtils.Simulate.submit(form);

但它不行.

问题可能是Simulate.change只调用select的onChange(不存在).我不认为这实际上会导致选择的值改变,除非你导致onChange处理程序的更改.

如果您坚持使用refs over onChange,请更改此行:

TestUtils.Simulate.change(selectComponent,{ target: { value: 'type_a' } });

到这个:

selectComponent.getDOMNode().value = 'type_a';

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读