[javascript] React.js에서 onSubmit 설정

Program / 글쓴이

양식을 제출할 doSomething()때 기본 게시 동작 대신 시도하고 있습니다.

분명히 React에서 onSubmit은 양식에 대해 지원되는 이벤트입니다. 그러나 다음 코드를 시도하면 :

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

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

메서드 doSomething()가 실행되지만 이후에도 기본 게시 동작이 수행됩니다.

내 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>;
    }
});

답변