<fieldset>在反应中改变形式

Question

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

这里是我的代码：

//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>