Question

所以我有一个看起来像这样的反应组件：

class SignInForm extends React.Component {
    constructor(props) {
        super(props);
    }
    onFormSubmit(event) {
        const username = React.findDOMNode(this.refs.username).value;
        const password = React.findDOMNode(this.refs.username).value;

        // very basic validation
        if (username && password.length > 6) {
            this.props.flux.signIn({ username, password });
        }

        event.preventDefault();
    }
    render() {
        return (
            <form onSubmit={ this.onFormSubmit.bind(this) } >
                <input type="text" ref="username" placeholder="username"/>
                <input type="password" ref="password" placeholder="password"/>
                <button type="submit">Submit</button>
            </form>
        );
    }
}

然后我想测试它如下：

describe('The SignInForm', () => {
    it('should call `attemptSignIn` when submitted with valid data in its input fields', (done) => {
        const spy = sinon.stub(flux.getActions('UserStateActions'), 'attemptSignIn');
        const element = <SignInForm { ...componentProps }/>;
        const component = TestUtils.renderIntoDocument(element);

        const inputs = TestUtils.scryRenderedDOMComponentsWithTag(component, 'input');
        TestUtils.Simulate.change(inputs[ 0 ], { target: { value: 'Joshua' } });
        TestUtils.Simulate.change(inputs[ 1 ], { target: { value: 'Welcome123' } });

        // This works, but I'd rather not set the values using the refs directly
        // React.findDOMNode(component.refs.userNameOrEmailAddressInput).value = 'Joshua';
        // React.findDOMNode(component.refs.plainTextPasswordInput).value = 'Welcome123';

        const DOMNode = React.findDOMNode(component, element);
        TestUtils.Simulate.submit(DOMNode);
        spy.callCount.should.equal(1);
        spy.restore();
    });
});

但onFormSubmit方法上的引用字段值不是Simulate.change调用设置的值。

为什么不呢？这是预期的行为吗？

Answer 1

您错过了输入字段的onChange处理程序，然后React将呈现为不受控制的输入。

<input onChange={this.handleChange} />

结合设置新状态将解决您的问题。

handleChange: function(event) {
    this.setState({value: event.target.value});
}

React docs解释了它here

如何获取模拟反应事件以更新组件中ref的值？

1 个答案: