React Component在表单标签内不起作用

Question

I am trying to create an interactive form in React.

I encounter serious issues working with components within the form tag. Both the component and the button executes all functions outside this form tag but not inside of it.. What do I miss? Thanks in advance

  <button type="button" onClick={this.addAbholer} >Click me</button>
  <Mycomp />
      <form id="form"  className="wizard-big">
          <Mycomp />
          <button type="button" onClick={this.addAbholer} >Click me</button>

Answer 1

Check this sample working code, i used the same code that you pasted, rendering the button and component inside form, all the events of child component getting triggered and on click of button is also working.

 class App extends React.Component{ addAbholer = (e) => { console.log('inside App'); } render(){ return <form className="wizard-big"> <Mycomp /> <button type='button' onClick={this.addAbholer}>Click me</button> </form> } } class Mycomp extends React.Component{ click = () => { console.log('inside Mycomp'); } render(){ return <div onClick={this.click}>Click on Mycomp</div> } } ReactDOM.render(<App/>, 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> <div id='app'/>