我有以下React组件,我想在我的select-block中选择一个带有TestUtils的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);
但它没有用。
答案 0 :(得分:13)
问题可能是Simulate.change只调用select的onChange(它不存在)。除非您在onChange处理程序中进行更改,否则我认为它实际上不会更改选择的值。
如果您坚持在onChange上使用refs,请更改以下行:
TestUtils.Simulate.change(selectComponent, { target: { value: 'type_a' } });
到此:
selectComponent.getDOMNode().value = 'type_a';