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>

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

Radio Buttons React.js处理函数

1 个答案: