已更新至以下JSX但仍无效。

Question

单选按钮不会触发onChange事件。但是，普通输入框可以触发onChange事件。

有什么问题？

handleFormChange(e) {
    debugger
    this.setState({[e.target.name]: e.target.value}, this.showState.bind(this, this.props));
}


<div className="col-md-6 col-sm-6">
    <div className="form-group">
        <label>Name</label>
        <input type="text" className="form-control"
               name="name" value={this.state.name} onChange={this.handleFormChange.bind(this)} />
    </div>
</div>


<div className="form-group">
    <label>Seat type : </label>
    <div className="btn-group" data-toggle="buttons">
        <label className="btn active">
            <input type="radio"
                   name="seat_type"
                   checked={this.state.seat_type==='indoor'}
                   onChange={ e => this.handleFormChange.bind(this)}
                   value={this.state.seat_type}

                   /><i
            className="fa fa-circle-o fa-2x"/><i
            className="fa fa-check-circle-o fa-2x"/><span> Indoor</span>
        </label>
        <label className="btn">
            <input type="radio"
                   name="seat_type"
                   checked={this.state.seat_type==='outdoor'}
                   onChange={ e => this.handleFormChange.bind(this)}
                   value={this.state.seat_type}

            /><i
            className="fa fa-circle-o fa-2x"/><i
            className="fa fa-check-circle-o fa-2x"/><span> Outdoor</span>
        </label>
    </div>
</div>

已更新至以下JSX但仍无效。

我可以切换收音机选项。但是无法触发handleFormChange回调。

      <div className="btn-group" data-toggle="buttons">
      <label className="btn active">
          <input type="radio"
                 name="seat_type"
                 defaultChecked={this.state.seat_type==='indoor'}
                 onChange={ e => this.handleFormChange.bind(this)}
                 value='indoor'

                 /><i
          className="fa fa-circle-o fa-2x"/><i
          className="fa fa-check-circle-o fa-2x"/><span>321 Indoor</span>
      </label>
      <label className="btn">
          <input type="radio"
                 name="seat_type"
                 defaultChecked={this.state.seat_type==='outdoor'}
                 onChange={ e => { this.handleFormChange.bind(this) } }
                 value='outdoor'
          /><i
          className="fa fa-circle-o fa-2x"/><i
          className="fa fa-check-circle-o fa-2x"/><span> 123Outdoor</span>
      </label>
      </div>

看来这个<div className="btn-group" data-toggle="buttons">会影响onClick事件。也许有些脚本正在听这个div。谢谢你们

Answer 1

因为两个单选按钮包含相同的值

value={this.state.seat_type}

请为每个具有相同名称的无线电输入分配不同的值。

将输入广播更改为

.....
<input type="radio"
    name="seat_type"
    checked={this.state.seat_type==='indoor'}
    onChange={ e => this.handleFormChange.bind(this)}
    value='indoor'
/>
.....
<input type="radio"
    name="seat_type"
    checked={this.state.seat_type==='outdoor'}
    onChange={ e => this.handleFormChange.bind(this)}
    value='outdoor'
/>
.....

Answer 2

将checked={this.state.seat_type==='indoor'}更改为defaultChecked={this.state.seat_type==='indoor'}，将checked={this.state.seat_type==='outdoor'}更改为defaultChecked={this.state.seat_type==='outdoor'}

Answer 3

如果您正在使用箭头功能，我不必将该功能绑定到此

 onChange={ e => this.handleFormChange(e) }

Answer 4

忘记onChange，在Label标签上点击并尝试：

 <div className="form-group">
        <label>Seat type : </label>
        <div className="btn-group" data-toggle="buttons">
            <label className="btn active" onclick={()=>this.handleFormChange('indoor')}>
                <input type="radio"
                       name="seat_type"
                       checked={this.state.seat_type==='indoor'}
                       onChange={ e => e => console.log('indoor'}
                       value={this.state.seat_type}

                       /><i
                className="fa fa-circle-o fa-2x"/><i
                className="fa fa-check-circle-o fa-2x"/><span> Indoor</span>
            </label>
            <label className="btn" onclick={()=>this.handleFormChange('outdoor')}>
                <input type="radio"
                       name="seat_type"
                       checked={this.state.seat_type==='outdoor'}
                       onChange={ e => console.log('outdoor')}
                       value={this.state.seat_type}

                /><i
                className="fa fa-circle-o fa-2x"/><i
                className="fa fa-check-circle-o fa-2x"/><span> Outdoor</span>
            </label>
        </div>
    </div>

Answer 5

通过将 onClick 事件添加到标签来工作。当我们使用 data-toggle =“ buttons” 时，这是一个问题，因此不会触发onChange事件。

constructor(props) {
   super(props);
   this.state = {
     seat_type: '',
    }
}

handleFormChange = (event) => {
  const val = event.currentTarget.querySelector("input").value;
  this.setState({ currValue: val });
}

render() {
  return (
    <div className="form-group">
      <label>Seat type : </label>
      <div className="btn-group" data-toggle="buttons">
        <label className="btn active" onclick={this.handleFormChange}>
          <input type="radio"
                 name="seat_type"
                 checked={this.state.seat_type === 'indoor'}
                 value="indoor"

          />
          <i className="fa fa-circle-o fa-2x" /><i className="fa fa-check-circle-o fa-2x" /><span> Indoor</span>
        </label>
        <label className="btn" onclick={this.handleFormChange}>
          <input type="radio"
                 name="seat_type"
                 checked={this.state.seat_type === 'outdoor'}
                 value="outdoor"

          /><i className="fa fa-circle-o fa-2x" /><i className="fa fa-check-circle-o fa-2x" /><span> Outdoor</span>
        </label>
      </div>
    </div>
  );
}

单选按钮onChange事件未触发

已更新至以下JSX但仍无效。

5 个答案: