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的新手，这是我在使用CoffeeScript的小型Rails项目中学习经验的一部分。

Answer 1

您不应该使用React的refs来访问直接后代。

您可以在范围内维护直接引用。

除此之外，您可能会从

这样的事情中受益

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

你不会以你的方式使用refs。总是可以使用findDOMNode的组件作为标识符。然后使用该引用，您可以调用组件函数。

注意React.findDOMNode行 https://facebook.github.io/react/docs/more-about-refs.html#completing-the-example

ae最终预后： 我认为它就像他们所说的文档一样，如果你发现自己想知道如何使用refs制作疯狂的Calder手机几何体，也许现在是时候重新考虑你的数据结构。＆＃34;当然他们会说＆＃34;州＆＃34;，然后你就去学习Immutables和Flux。如果你真的很先进，你有时可以完全放弃React，只需使用Flux和WebGL。我的看法。 https://github.com/Terebinth/Vickers是我最新的完整React代码库。

React.js如何通过refs调用子组件上的方法？

1 个答案: