반응 - 양식 제출 방지

반응 - 양식 제출 방지

리액트로 실험을 해봤어요제 실험에서는 Reactstrap 프레임워크를 사용하고 있습니다.버튼을 클릭하면 HTML 양식이 제출됩니다.버튼을 클릭했을 때 양식 제출을 방지할 수 있는 방법이 있습니까?

여기서 내 문제를 재현했다.내 폼은 매우 기본적이고 다음과 같습니다.

<Form>
  <h3>Buttons</h3> 
  <p>
    <Button color="primary" onClick={this.onTestClick}>primary</Button>&nbsp;
  </p>
</Form>

제가 무엇을 빠뜨리고 있나요?

먼저 javascript(일반 html)가 없으면form다음 중 하나를 클릭하면 요소가 전송됩니다.<input type="submit" value="submit form">또는<button>submits form too</button>javascript에서는 이벤트 핸들러를 사용하여 호출함으로써 이를 방지할 수 있습니다.e.preventDefault()버튼을 클릭하거나 양식을 제출합니다. e는 이벤트 핸들러에 전달되는 이벤트 객체입니다.react를 사용하면 2개의 관련 이벤트핸들러는 다음 형식으로 사용할 수 있습니다.onSubmit버튼의 다른 한쪽은,onClick.

예: http://jsbin.com/vowuley/edit?html,js,console,output

JS는 필요없었습니다.a를 추가해 주세요.type값을 가진 버튼에 기인하다button

<Button type="button" color="primary" onClick={this.onTestClick}>primary</Button>&nbsp;

기본적으로 버튼 요소는 "submit" 유형이며, 이를 통해 포함된 양식 요소를 제출합니다(있는 경우).의 변경type'버튼'을 누르면 막을 수 있습니다.

preventDefault가 검색 대상입니다.단추 제출을 차단하려면

<Button onClick={this.onClickButton} ...

코드

onClickButton (event) {
  event.preventDefault();
}

커스텀 방식으로 처리하는 폼이 있는 경우는, 송신시에 상위 레벨의 이벤트를 캡쳐 할 수 있습니다.이것에 의해, 그 버튼의 송신도 정지됩니다.

<form onSubmit={this.onSubmit}>

코드 이상

onSubmit (event) {
  event.preventDefault();

  // custom form handling here
}

onSubmit Atribute 는, 가 있는 경우는, 버튼이 아니고, 반드시 기입해 주세요.

<form onSubmit={e => e.preventDefault()}>
    <button onClick={this.handleClick}>Click Me</button>
</form>

버튼 onClick 속성을 커스텀 함수로 변경해야 합니다.

두 가지 방법

먼저 인수 내의 이벤트를 onClick으로 바로 전달합니다.

  onTestClick(e) {
    e.preventDefault();
    alert('here');
  }

---

  // Look here we pass the args in the onClick
  <Button color="primary" onClick={e => this.onTestClick(e)}>primary</Button>&nbsp;

---

두 번째는 논쟁을 일으켜 onClick을 제대로 실행했습니다.

  onTestClick() {
    alert('here');
  }

---

  // Here we did right inside the onClick, but this is the best way
  <Button color="primary" onClick={e => (e.preventDefault(), this.onTestClick())}>primary</Button>&nbsp;

도움이 되었으면 좋겠다

고객님의 고객명onTestClickfunction, event 인수 전달preventDefault()그 위에 올려놔요.

function onTestClick(e) {
    e.preventDefault();
}

import React, { Component } from 'react';

export class Form extends Component {
  constructor(props) {
    super();
    this.state = {
      username: '',
    };
  }
  handleUsername = (event) => {
    this.setState({
      username: event.target.value,
    });
  };

  submited = (event) => {
    alert(`Username: ${this.state.username},`);
    event.preventDefault();
  };
  render() {
    return (
      <div>
        <form onSubmit={this.submited}>
          <label>Username:</label>
          <input
            type="text"
            value={this.state.username}
            onChange={this.handleUsername}
          />
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

export default Form;

이벤트의 기본 액션을 방지하고 반환했습니다.false함수에서 가져옵니다.

function onTestClick(e) {
    e.preventDefault();
    return false;
}

또 다른 접근성이 뛰어난 솔루션이 있습니다.단추를 누르지 마세요.폼에는 이미 많은 기능이 내장되어 있습니다.버튼 누름을 처리하는 대신 양식 제출 및 재설정을 처리합니다.간단하게 추가onSubmit={handleSubmit}그리고.onReset={handleReset}고객님께form요소들.

는 그냥 하다를 포함하면 .event in in in 。event.preventDefault();디폴트 송신 동작을 정지합니다.이제 사용자의 양식이 접근성 관점에서 올바르게 작동하고 사용자가 수행할 수 있는 모든 형식의 제출을 처리합니다.

function onTestClick(evt) {
  evt.stopPropagation();
}

import React from 'react'
import Button from './button'
import Input from './input'

function Form(){

    function handleSubmit(event){
        event.preventDefault();
    }

    return(
        <div>
            <h1>FORM</h1>
            <form onSubmit={handleSubmit}>
                <Input type = 'text' placeholder = "What's Your Name?" />
                <Button buttonText = 'Submit' />
            </form>
        </div>
    );
}

export default Form;

componentDidUpdate(){               
    $(".wpcf7-submit").click( function(event) {
        event.preventDefault();
    })
}

하시면 됩니다.componentDidUpdate ★★★★★★★★★★★★★★★★★」event.preventDefault()폼 제출을 비활성화합니다.반응하면 거짓이 반환된다.

언급URL : https://stackoverflow.com/questions/39809943/react-preventing-form-submission