React 组件在表单标签内不起作用

Question

我正在尝试在 React 中创建一个交互式表单。

我在使用表单标签中的组件时遇到了严重的问题。 组件和按钮都执行此表单标记之外但不在其内部的所有功能。我错过了什么？ 提前致谢

  <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

检查此示例工作代码，我使用了与您粘贴相同的代码，在表单内呈现按钮和组件，子组件的所有事件都被触发并且单击按钮也可以正常工作。

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