React.js에서의 onSubmit 설정

React.js에서의 onSubmit 설정

양식을 제출하면, 나는 그것을 하려고 한다.doSomething()디폴트 포스트 동작입니다.

React에서 onSubmit은 폼에서 지원되는 이벤트라고 합니다.다만, 다음의 코드를 사용해 보면,

var OnSubmitTest = React.createClass({
    render: function() {
        doSomething = function(){
           alert('it works!');
        }

        return <form onSubmit={doSomething}>
        <button>Click me</button>
        </form>;
    }
});

방법doSomething()는 실행되지만 그 이후에는 기본 POST 동작이 계속 실행됩니다.

제 jsfiddle에서 테스트해 보세요.

질문입니다.기본 포스트 동작을 방지하려면 어떻게 해야 합니까?

고객님의 고객명doSomething()기능, 이벤트에서의 패스e및 사용e.preventDefault().

doSomething = function (e) {
    alert('it works!');
    e.preventDefault();
}

또한 이벤트 핸들러를 렌더링 밖으로 옮기는 것이 좋습니다.

var OnSubmitTest = React.createClass({

  submit: function(e){
    e.preventDefault();
    alert('it works!');
  }

  render: function() {
    return (
      <form onSubmit={this.submit}>
        <button>Click me</button>
      </form>
    );
  }
});

<form onSubmit={(e) => {this.doSomething(); e.preventDefault();}}></form>

그것은 나에게 잘 작동한다

이벤트를 인수로 함수에 전달하고 기본 동작을 방지할 수 있습니다.

var OnSubmitTest = React.createClass({
        render: function() {
        doSomething = function(event){
           event.preventDefault();
           alert('it works!');
        }

        return <form onSubmit={this.doSomething}>
        <button>Click me</button>
        </form>;
    }
});

언급URL : https://stackoverflow.com/questions/28479239/setting-onsubmit-in-react-js