Как смоделировать реагирующие события для обновления значений ref в моем компоненте?

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 Арен 't, которые установлены вызовом Simulate.change.

Почему нет? Это ожидаемое поведение?

Answer 1

Вам не нужен обработчик onChange для ваших полей ввода, которые затем будут обрабатывать как неконтролируемые входы.

<input onChange={this.handleChange} /> 

в сочетании с установкой нового состояния устранит проблемы.

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

Реагировать документы объясняет это here