javascript - 以 React 形式破坏 onChange

Question

我在 React 组件中有一个表单，我有多个不会被触发的 onChange 函数。我做了一些调试并意识到这是由于 fieldset 元素造成的。当我从表单中删除字段集时，所有 onChange 函数都起作用，当我将字段集放回时，所有 onChange 函数都不起作用。

这是我的代码:

//The function
handleChange(event) {
  console.log('change');
}

// The part of the form where I have onChange's. 
                    <fieldset> //When I remove this element, everything works. 
                    <h2>Account Information</h2>
                    <div className="row">
                        <div className="col-lg-8">
                            <label>Birthday</label>
                            <div className="form-group">
                                <label htmlFor="birthmonth" className="birthdateLabel">Month</label>
                                <select name="birthmonth" id="birthmonth" className="form-control required birthdateOptions" onChange={this.handleChange.bind(this)}>
                                    {months.map(month => <option key={month.number} value={month.number}>{month.name}</option>)}
                                </select>
                                <label htmlFor="birthday" className="birthdateLabel">Day</label>
                                <select placeholder="Day" name="birthday" id="birthday" className="form-control required birthdateOptions">
                                    {dayOptions.map(day => day)}
                                </select>
                                <label htmlFor="birthyear" className="birthdateLabel">Year</label>
                                <select name="birthyear" id="birthyear" className="form-control required birthdateOptions">
                                    {yearOptions.map(year => year)}
                                </select>
                            </div>
                            <div className="form-group">
                                <label>M/F?</label>
                                <select className="form-control required" id="sex" name="sex" onChange={this.handleChange.bind(this)}>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                    <option value="other">Don't wish to identify</option>
                                </select>
                            </div>
                        </div>
                        <div className="col-lg-4">
                            <div className="form-group">
                                <label>Avatar</label>
                                <input id="avatar" name="avatar" type="text" className="form-control" />
                            </div>
                        </div>
                    </div>
                    </fieldset>

Answer 1

尝试运行代码片段，我没有遇到问题:

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event){
    console.log(event.target.value);
  }

  render(){
    return (
      <fieldset> 
        <h2>Account Information</h2>
        <div className="row">
          <div className="col-lg-8">
            <label>Birthday</label>
            <div className="form-group">
              <label htmlFor="birthmonth" className="birthdateLabel">Month</label>
              <select name="birthmonth" id="birthmonth" className="form-control required birthdateOptions" onChange={this.handleChange}>
                {
                  //months.map(month => <option key={month.number} value={month.number}>{month.name}</option>)
                  'month data'
                }
              </select>
              <label htmlFor="birthday" className="birthdateLabel">Day</label>
              <select placeholder="Day" name="birthday" id="birthday" className="form-control required birthdateOptions">
                {
                  //dayOptions.map(day => day)
                  'day data'
                }
              </select>
              <label htmlFor="birthyear" className="birthdateLabel">Year</label>
              <select name="birthyear" id="birthyear" className="form-control required birthdateOptions">
                {
                  //yearOptions.map(year => year)
                  'yearData'
                }
              </select>
            </div>
            <div className="form-group">
              <label>M/F?</label>
              <select className="form-control required" id="sex" name="sex" onChange={this.handleChange}>
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Don't wish to identify</option>
              </select>
            </div>
          </div>
          <div className="col-lg-4">
            <div className="form-group">
              <label>Avatar</label>
              <input id="avatar" name="avatar" type="text" className="form-control" />
            </div>
          </div>
        </div>
      </fieldset>
    );
  }
}

ReactDOM.render(
  <SomeComponent />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<body>
<div id="app"></div>
</body>