Question

我想使用单键切换使用单选按钮来注册状态值（我将用它来处理用户在点击提交按钮后所采用的路线）。

var Pathfinder = React.createClass({
  getInitialState: function() {
    return {query: '', pathname: '', route: 'one'};
  },
  handleRadioButton: function(type) {
    console.log('type: ', type);
    this.setState({route: type});
  },
  handleTextField: function(event) {
    if (this.state.route === 'one') {
      this.setState({pathname: '/pathone/'});
    } else {
      this.setState({pathname: '/pathtwo/'});
    }
  },
  render: function() {
    return (
      <div>
        <div>
          <div>
            <input autoFocus type="search" onChange={this.handleTextField} />
            <div>
              <Link to={this.state.pathname}>
                <button type="submit"><i className="glyphicon glyphicon-search"></i></button>
              </Link>
            </div>
            <div data-toggle="buttons">
              <label>
                <input type="radio" checked={this.state.route === 'one'} onChange={() => this.handleRadioButton('one')} />1
              </label>
              <label>
                <input type="radio" checked={this.state.route === 'two'} onChange={() => this.handleRadioButton('two')} />2
              </label>
            </div>
          </div>
        </div>
      </div>
      );
  }
});

如上所述运行，onChange函数永远不会被调用。

如果我将onChange匿名函数更改为： onChange={setTimeout( () => this.handleRadioButton('one'), 0)}然后它会快速地从one快速变换为two无限期。

Answer 1

我没有提到我使用的是Bootstrap，因为我认为它不相关......但显然是。当涉及某些输入类型（包括单选按钮）时，React和Bootstrap之间存在冲突。

切换到react-bootstrap并且它现在渲染得很好 - 只需要修复一些样式。

通过单选按钮选择调用onChange函数

1 个答案: