单选按钮 React.js 处理函数

Question

我创建了一个 React 组件，它应该根据用户将使用的地址类型（= 代码中的模式）显示具有不同字段的表单。 用户可以借助两个单选按钮选择地址类型。

最初的 html 看起来不错：选择了人员类型。第二步也很好：如果我单击公司，则设置公司地址类型并显示正确的字段。但是如果我点击回人模式，就不会再抛出任何事件了。

ADDRESS_MODE_PERSON = 1
ADDRESS_MODE_COMPANY = 2

EditAddressComp = React.createClass
  getInitialState: ->
    {
      mode: ADDRESS_MODE_PERSON
    }
  handleRBAM: (e, mode)-> # handle radio button address mode
    @setState
      mode: mode
    console.log 'a',mode
  handleRBAM_: (_mode)-> # returns handler
    console.log 'b',_mode
    self = @
    return (e)->
      self.handleRBAM(e,_mode)
  render: ->
    <form className="form-horizontal" role="form">
      <div className="form-group">
        <div className="col-sm-offset-2 col-sm-10">
        <label className="radio-inline">
          <input type="radio" name="addressMode" id="addressMode1"
            onclick={@handleRBAM_ ADDRESS_MODE_PERSON}
            defaultChecked={@state.mode is ADDRESS_MODE_PERSON}
            value={ADDRESS_MODE_PERSON}/> Person
        </label>
        <label className="radio-inline">
          <input type="radio" name="addressMode" id="addressMode2"
            onclick={@handleRBAM_ ADDRESS_MODE_COMPANY}
            defaultChecked={@state.mode is ADDRESS_MODE_COMPANY}
            value={ADDRESS_MODE_COMPANY}/> Company
        </label>
        </div>
      </div>
      {
        if @state.mode is ADDRESS_MODE_COMPANY
          <EditAddressComp.Company />
        else if @state.mode is ADDRESS_MODE_PERSON
          <EditAddressComp.Person />
        else
          <span/>
      }
      <div className="form-group">
        <div className="col-sm-offset-2 col-sm-10">
          <button type="submit" className="btn btn-default">Submit</button>
        </div>
      </div>
    </form>


EditAddressComp.Company = React.createClass
  render: ->
    <div>
    <div className="form-group">
      <label className="control-label col-sm-2">Name:</label>
      <div className="col-sm-10">
        <input type="text" className="form-control" id="name" 
          placeholder="Enter name"/>
      </div>
    </div>
    <div className="form-group">
      <label className="control-label col-sm-2">Name 2:</label>
      <div className="col-sm-10">
        <input type="text" className="form-control" id="name2" 
          placeholder="Enter Name 2"/>
      </div>
    </div>
    </div>

EditAddressComp.Person = React.createClass
  render: ->
    <div>
    <div className="form-group">
      <label className="control-label col-sm-2">First name:</label>
      <div className="col-sm-10">
        <input type="text" className="form-control" id="firstname" 
          placeholder="Enter first name"/>
      </div>
    </div>
    <div className="form-group">
      <label className="control-label col-sm-2">Last Name:</label>
      <div className="col-sm-10">
        <input type="text" className="form-control" id="lastname" 
          placeholder="Enter last name"/>
      </div>
    </div>
    </div>

知道哪里出了问题吗？

Answer 1

这段代码运行良好：

ADDRESS_MODE_PERSON = '1'
ADDRESS_MODE_COMPANY = '2'

EditAddressComp = React.createClass
  getInitialState: ->
    {
      mode: ADDRESS_MODE_PERSON
    }
  handleRBAM: (e)-> # handle radio button address mode
    @setState
      mode: e.currentTarget.value
  render: ->
    <form className="form-horizontal" role="form">
      <div className="form-group">
        <div className="col-sm-offset-2 col-sm-10">
        <label className="radio-inline">
          <input type="radio" name="addressMode" id="addressMode1"
            onChange=@handleRBAM
            defaultChecked={@state.mode is ADDRESS_MODE_PERSON}
            value={ADDRESS_MODE_PERSON}/> Person
        </label>
        <label className="radio-inline">
          <input type="radio" name="addressMode" id="addressMode2"
            onChange=@handleRBAM
            defaultChecked={@state.mode is ADDRESS_MODE_COMPANY}
            value={ADDRESS_MODE_COMPANY}/> Company
        </label>
        </div>
      </div>
      {
        if @state.mode is ADDRESS_MODE_COMPANY
          <EditAddressComp.Company />
        else if @state.mode is ADDRESS_MODE_PERSON
          <EditAddressComp.Person />
        else
          <span/>
      }
      <div className="form-group">
        <div className="col-sm-offset-2 col-sm-10">
          <button type="submit" className="btn btn-default">Submit</button>
        </div>
      </div>
    </form>


EditAddressComp.Company = React.createClass
  render: ->
    <div>
    <div className="form-group">
      <label className="control-label col-sm-2">Name:</label>
      <div className="col-sm-10">
        <input type="text" className="form-control" id="name"
          placeholder="Enter name"/>
      </div>
    </div>
    <div className="form-group">
      <label className="control-label col-sm-2">Name 2:</label>
      <div className="col-sm-10">
        <input type="text" className="form-control" id="name2"
          placeholder="Enter Name 2"/>
      </div>
    </div>
    </div>

EditAddressComp.Person = React.createClass
  render: ->
    <div>
    <div className="form-group">
      <label className="control-label col-sm-2">First name:</label>
      <div className="col-sm-10">
        <input type="text" className="form-control" id="firstname"
          placeholder="Enter first name"/>
      </div>
    </div>
    <div className="form-group">
      <label className="control-label col-sm-2">Last Name:</label>
      <div className="col-sm-10">
        <input type="text" className="form-control" id="lastname"
          placeholder="Enter last name"/>
      </div>
    </div>
    </div>

1. React 似乎只消化 onChange 而不是 onclick。
2. ADDRESS_MODE_PERSON = '1' 应该定义为字符串而不是数字（否则比较失败）