React.js как вызвать метод для дочернего компонента через refs?

Question

У меня есть CustomerForm компонент, как так:

@CustomerForm = React.createClass 
    getInitialState: -> 
    name: '' 
    street: '' 
    location: '' 
    addendum: '' 

    render: -> 
    React.DOM.form 
     className: 'ui form' 
     React.DOM.div 
     className: 'field' 
     React.DOM.label null, 'Name' 
     React.DOM.input 
      type: 'text' 
      name: 'name' 
      value: @state.name 
      onChange: @handleChange 
     React.DOM.div 
     className: 'field' 
     React.DOM.label null, 'Address' 
     React.DOM.div 
      className: 'three fields' 
      React.DOM.div 
      className: 'field' 
      React.DOM.input 
       type: 'text' 
       name: 'street' 
       placeholder: 'Street' 
       value: @state.street 
       onChange: @handleChange 
      React.DOM.div 
      className: 'field' 
      React.DOM.input 
       type: 'text' 
       name: 'location' 
       placeholder: 'Location' 
       value: @state.location 
       onChange: @handleChange 
      React.DOM.div 
      className: 'field' 
      React.DOM.input 
       type: 'text' 
       name: 'addendum' 
       placeholder: 'Addendum' 
       value: @state.street 
       onChange: @handleChange 

    handleChange: (e) -> 
    @setState "#{e.target.name}": e.target.value 

    valid: -> 
    @state.name && @state.street && @state.location 

Как вы можете видеть, что это предоставляет метод под названием valid(). У меня также есть CustomerModal компонент, который является семантико-UI модальный диалог, который делает вид:

@CustomerModal = React.createClass 
    render: -> 
    React.DOM.div 
     className: 'ui active modal' 
     React.DOM.i className: 'close icon' 
     React.DOM.div className: 'header', 'Customer' 
     React.DOM.div 
     className: 'content' 
     React.createElement(CustomerForm, ref: 'form') 
     React.DOM.div className: 'actions', 
     React.DOM.button 
      type: 'submit' 
      disabled: !@refs.form.valid() 
      'Submit' 

Как дается semantic-ui's modal markup я хотел бы иметь кнопку отправки на CustomerModal компонента. Кроме того, я хотел бы, чтобы кнопка отправки была отключена, пока форма недействительна, поэтому вызывает valid() в компоненте CustomerForm, потому что сам компонент должен определить, действительно ли это или нет.

Однако, когда я пытаюсь использовать @refs объект в указанном выше смысле, я всегда получаю ошибку TypeError: this.refs.form is undefined

Я совершенно новой для Ract.js, и это является частью моего опыта обучения с ним в небольшой Rails, используя CoffeeScript.

Answer 1

Вам не нужно использовать React's refs для доступа к прямым потомкам.

Вы можете поддерживать прямые ссылки в области.

Помимо, вы могли бы извлечь выгоду из чего-то вроде

{form, div, label, input} = React.DOM 

Вы бы не использовать реф, как вы должны в любом случае. Всегда вы можете получить компонент с findDOMNode по ссылке в качестве идентификатора. Затем с помощью этой ссылки вы можете вызвать функцию компонента.

Обратите внимание на React.findDOMNode линия https://facebook.github.io/react/docs/more-about-refs.html#completing-the-example

ая окончательный прогноз: Я думаю, что это как в документации, где они говорят, что «если вы найдете себе интересно, как сделать сумасшедший Колдер мобильной геометрий с рефами, возможно, пришла время переосмыслить структуру данных. " Конечно, они говорят «состояние», а затем вы уходите, чтобы изучить Immutables и Flux. И если вы действительно продвинулись, вы можете иногда полностью отказаться от Реакт и просто использовать Flux, используя WebGL. Мое мнение. https://github.com/Terebinth/Vickers - моя последняя полная база кода React.