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

检查此示例工作代码，我使用了您粘贴的相同代码，在窗体中呈现按钮和组件，触发子组件的所有事件以及单击按钮也正常工作。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: