입력내부에서 입력누름시 리액션방지폼제출

입력내부에서 입력누름시 리액션방지폼제출

Enter 키를 누르면 반응 방지 양식 제출

상위 컨테이너가 호출할 수 있는 다음 React Search Bar 구성 요소가 있습니다.

<SearchBar onInputChange={this.handleInputChange} />

사용자가 입력을 변경할 때마다 부모 컨테이너에 알립니다.이것이 내 검색창에 제출 버튼이 필요 없는 이유입니다.

그러나 검색창에서 Enter 키를 누르면 전체 페이지가 새로 고쳐집니다.그리고 나는 그것을 원하지 않는다.

폼에 버튼이 있으면 event.provent Default()를 호출할 수 있습니다.하지만 이 경우 버튼이 없어서 어떻게 해야 할지 모르겠다.

class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e) {
        this.setState({ value: e.target.value });
        this.props.onInputChange(e.target.value);
    }

    render() {
        return (
        <div id="search-bar">
            <form>
            <FormGroup controlId="formBasicText">
                <FormControl
                type="text"
                onChange={this.handleChange}
                value={this.state.value}
                placeholder="Enter Character Name"
                />          
            </FormGroup>
            </form>
        </div>
        );
    }
}

export default SearchBar

기본 양식 작업을 금지하는 양식 처리기를 생성해야 합니다.

가장 간단한 구현은 다음과 같습니다.

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

단, 그 전용 핸들러를 작성하는 것이 이상적입니다.

<form onSubmit={this.submitHandler}>

다음과 같은 실시로

submitHandler(e) {
    e.preventDefault();
}

Search 입력 필드가 있는 React 컴포넌트(비React OR React) 폼에 중첩된 경우 브라우저 전체에서 이 방법이 가장 적합합니다.

<MyInputWidget
  label="Find"
  placeholder="Search..."
  onChange={this.search}
  onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}
  value={this.state.searchText} />

(e)=>{e.target.keyCode === 13}(@DavidKamer의 답변)이 올바르지 않습니다.당신은 그것을 원하지 않는다.event.target.입력란입니다.당신은 이벤트 자체를 원한다.React(구체적으로는 현시점에서는 16.8)에서는event.key(예를 들어, 원하는 대로의 키).

폼 입력 필드에 Enter 키를 누르면 기본 전송이 수행되지 않지만 onSubmit 메서드가 트리거되기 때문에 이것이 모든 상황에서 작동할지 확신할 수 없습니다.즉, 양식에 대해 설계한 의사 제출 작업을 계속 트리거할 수 있습니다.ES6를 탑재한 라이너 1개로 문제를 구체적이고 완전하게 해결합니다.

<input onKeyPress={(e)=>{e.target.keyCode === 13 && e.preventDefault();}} />

이 솔루션은 부작용이 0이어야 하며 문제를 직접 해결합니다.

ENTER를 방지하는 가장 좋은 방법은 Eon이 제안하는 바와 같이 입력 요소에 다음 항목을 추가하는 것입니다.

onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}

이것으로 충분합니다.

<Input
   ...
   onKeyDown={(e) => { e.key === 'Enter' && e.preventDefault() }}
/>

검색 입력용 Enter 키 금지:

<input type="text" onKeyPress={e => {
  if (e.key === 'Enter') e.preventDefault();
}} />

언급URL : https://stackoverflow.com/questions/43750335/react-prevent-form-submission-when-enter-is-pressed-inside-input