首页 > 解决方案 > React 在单选按钮选择上附加一个按钮

问题描述

我正在尝试在选择单选按钮时附加一个按钮。我知道我必须与状态一起玩才能实现这一点,但这对我来说很复杂。请帮忙。

标签: reactjsreact-router

解决方案


使用 React 文档doc1 doc2 doc3

尝试这个:

class Radio extends React.Component {
  constructor(props) {
    super(props);
    this.state = {radio: 0};
    this.onRadioChanged = this.onRadioChanged.bind(this);
  }

  onRadioChanged(event) {
      this.setState({radio: parseInt(event.target.value, 10)});
  }

  render() {
    return (
      <div>
      <input type="radio"
        value={0} 
        checked={this.state.radio === 0} 
        onChange={this.onRadioChanged} />
      Option 1
      <input type="radio"
        value={1} 
        checked={this.state.radio === 1} 
        onChange={this.onRadioChanged} />
      Option 2
      {this.state.radio === 1? <button>Hi!</button> : null}
      </div>
    );
  }
}

React.render(
    <Radio/>, 
    document.body
);

推荐阅读