为什么我的单选按钮没有在反应中切换状态？

Question

我正在尝试部分遵循 react 教程。

此时我正在尝试创建一个具有 2 个“收音机”类型的输入字段的组件。默认选中一个。我试图模仿一种行为，即如果我单击另一个单选按钮，当前选中的单选按钮将被关闭，而单击的单选按钮将被打开。

问题是，在我单击最初未选中的那个后，它们都“永远”关闭了。

我已经通过代码进行了调试，直到调用setState 一切正常。状态已按我的意愿设置，但按钮未更新。

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = this.createInitialState({celsiusChecked: true})
    this.handleRadioTicked = this.handleRadioTicked.bind(this)
  }

  createInitialState(additionalState={}){
    let state = {
      fahrenheitChecked: false,
      celsiusChecked: false
    }

    state = Object.assign(state, additionalState)

    return state
  }

  handleRadioTicked(event){
    event.preventDefault()

    let radioName = event.target.name
    let stateProperty

    if (radioName === 'c'){
      stateProperty = 'celsiusChecked'
    } else if (radioName === 'f'){
      stateProperty = 'fahrenheitChecked'
    } else {
      throw Exception("something bad happened...probably the input field names have changed")
    }

    let newState = this.createInitialState()
    newState[stateProperty]= true;

    // the newState is calculated OK. Checked for both buttons.
    // Also, initially, the buttons render properly
    this.setState(newState) 
  }

  render(){
    return (
      <div>
          <form>
            <fieldset>
              <input type="radio" name="f" value="fahrenheit" checked={this.state.fahrenheitChecked} onChange={this.handleRadioTicked}/>
              <label htmlFor="f">Fahrenheit</label>
              <input type="radio" name="c" value="celsius" checked={this.state.celsiusChecked} onChange={this.handleRadioTicked}/>
              <label htmlFor="c">Celsius</label>
            </fieldset>
        </form>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

我正在使用这个 codepen 设置运行这个示例，这是 facebook 提供的：http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010

我错过了什么吗？

[EDIT] 我更新了输入的名称，并更正了代码。另一个问题：现在输入永远不会改变状态。我调试并以正确的状态调用 setState 方法，但是按钮不会切换状态。我在this.setState 调用之前放了一个断点，然后按钮看起来没问题。他们正在切换回初始状态，但是在那之后的某个地方。我可能应该尝试放置某种 DOM 断点....

新代码：

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = this.createInitialState({celsiusChecked: true})
    this.handleRadioTicked = this.handleRadioTicked.bind(this)

    this.setState = this.setState.bind(this)
  }

  createInitialState(additionalState={}){
    let state = {
      fahrenheitChecked: false,
      celsiusChecked: false
    }

    state = Object.assign(state, additionalState)

    return state
  }

  handleRadioTicked(event){
    event.preventDefault()

    let radioValue = event.target.value
    let stateProperty

    if (radioValue === 'celsius'){
      stateProperty = 'celsiusChecked'
    } else if (radioValue === 'fahrenheit'){
      stateProperty = 'fahrenheitChecked'
    } else {
      throw Exception("something bad happened...probably the input field names have changedx")
    }

    let newState = this.createInitialState()
    newState[stateProperty]= true;

    // Here the newState is succesfully created each time
    // ...still, the radio buttons don't "react" appropriately - pardon the pun
    this.setState(newState) 
  }

  render(){
    return (
      <div>
          <form>
            <fieldset>
              <input type="radio" name="scale" value="fahrenheit" checked={this.state.fahrenheitChecked} onChange={this.handleRadioTicked}/>
              <label htmlFor="f">Fahrenheit</label>
              <input type="radio" name="scale" value="celsius" checked={this.state.celsiusChecked} onChange={this.handleRadioTicked}/>
              <label htmlFor="c">Celsius</label>
            </fieldset>
        </form>
      </div>
    )
  }
}

Answer 1

对于单选按钮，两个输入的名称属性必须匹配

<input type="radio" name="f" 

将两个名称都更改为“f”或其他字符串，然后重试。

见下例

  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>

Answer 2

我知道这个问题太老了，但它可以帮助某人。

尝试删除event.preventDefault()，当您使用它时，您会阻止单选按钮的主要功能切换。

Answer 3

对于 ReactJS，我的问题是我定义了我的单选按钮的 checked 属性，而不是 defaultChecked 一个！