Question

我有一个简单的任务我试图完成：只要在其组之间切换一个单选按钮就触发一个函数。

class App extends Component {
    onButtonClick() {
        console.log('something was clicked!')
    }

    return (
      <div>
        <button onClick={this.onButtonClick.bind(this)}>
            Click me
        </button>
        <input
            type="checkbox"
            onChange={this.onButtonClick.bind(this)}
        />
        <input
            type="radio"
            value="yes"
            name="answer"
            onChange={this.onButtonClick.bind(this)}
        />
        <input
            type="radio"
            value="no"
            name="answer"
            onChange={this.onButtonClick.bind(this)}
        />
      </div>
    )
}

按钮和复选框工作正常。如果单击它，它会多次触发该函数。单选按钮会触发一次，然后停止。

由于某种原因，几乎就像ReactJS停止观看onChange的单选按钮一样。任何帮助将不胜感激。谢谢！

更新

它似乎在https://codesandbox.io/s/rGMGzJNL中正常工作，但在我当地的环境中无法正常工作，这完全令人困惑。如果我弄清楚发生了什么会更新，但如果有人遇到过这个问题，我会很感激！

Answer 1

您需要在每个无线电上设置checked属性并将无线电状态保存在状态。

class App extends Component {
  state = {
    radio: 'yes',
  }

  onButtonClick() {
    console.log("something was clicked!");
  }

  onRadioChange(value) {
    console.log("radio change");
    this.setState({
      radio: value,
    })
  }

  render() {
    return (
      <div>
        <button onClick={() => this.onButtonClick()}>
          Click me
        </button>
        <input type="checkbox" onClick={() => this.onButtonClick()} />
        <input
          type="radio"
          value="yes"
          name="answer"
          checked={this.state.radio === 'yes'}
          onChange={(e) => this.onRadioChange('yes')}
        />
        <input
          type="radio"
          value="no"
          name="answer"
          checked={this.state.radio === 'no'}
          onChange={(e) => this.onRadioChange('no')}
        />
      </div>
    );
  }
}

Radio Input onChange只发射一次？

1 个答案: