[javascript] Enter 키를 누른 후 onChange 이벤트를 호출하려면

사용자 반응, 완전성에 대한 답변입니다.

반응 버전 16.4.2

모든 키 입력에 대해 업데이트하거나 제출시에만 값을 가져 오려고합니다. 주요 이벤트를 구성 요소에 추가하면 작동하지만 공식 문서에서 권장하는 대안이 있습니다.

제어 대상 구성 요소와 제어되지 않는 구성 요소

통제

로부터 문서 도구 – 양식 및 제어 구성 요소 :

HTML에서 input, textarea 및 select와 같은 양식 요소는 일반적으로 자체 상태를 유지하고 사용자 입력에 따라 업데이트합니다. React에서 변경 가능한 상태는 일반적으로 구성 요소의 state 속성에 유지되며 setState ()로만 업데이트됩니다.

우리는 React 상태를“단일 진실 소스”로 만들어 두 가지를 결합 할 수 있습니다. 그런 다음 양식을 렌더링하는 React 구성 요소는 후속 사용자 입력에서 해당 양식에서 발생하는 사항도 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 양식 요소를 “제어 구성 요소”라고합니다.

제어 된 구성 요소를 사용하는 경우 값을 변경할 때마다 상태를 업데이트해야합니다. 이를 위해 이벤트 핸들러를 구성 요소에 바인드하십시오. 문서의 예제에서 일반적으로 onChange 이벤트입니다.

예:

1) 생성자에서 이벤트 핸들러 바인드 (값이 상태로 유지됨)

constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
}

2) 핸들러 기능 생성

handleChange(event) {
    this.setState({value: event.target.value});
}

3) 양식 제출 기능 작성 (값은 상태에서 가져옴)

handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
}

4) 렌더

<form onSubmit={this.handleSubmit}>
    <label>
      Name:
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    </label>
    <input type="submit" value="Submit" />
</form>

제어 된 구성 요소 를 사용 하는 경우 handleChange올바른 상태를 업데이트하고 유지하기 위해 항상 기능이 실행됩니다. 상태는 항상 업데이트 된 값을 가지며 양식을 제출하면 값이 상태에서 가져옵니다. 양식이 매우 길면 모든 구성 요소에 대한 함수를 작성하거나 모든 구성 요소의 값 변경을 처리하는 간단한 기능을 작성해야하므로 단점이 될 수 있습니다.

억제 되지 않은

로부터 문서 도구 – 통제되지 않은 구성 요소

대부분의 경우 제어 된 구성 요소를 사용하여 양식을 구현하는 것이 좋습니다. 제어되는 구성 요소에서 양식 데이터는 React 구성 요소에 의해 처리됩니다. 대안은 양식 데이터가 DOM 자체에 의해 처리되는 제어되지 않는 구성 요소입니다.

모든 상태 업데이트에 대한 이벤트 처리기를 작성하는 대신 제어되지 않은 구성 요소를 작성하려면 ref를 사용하여 DOM에서 양식 값을 얻을 수 있습니다.

여기서 가장 큰 차이점은 onChange함수를 사용하지 않고 onSubmit양식을 사용하여 값을 가져오고 필요한 경우 유효성을 검사한다는 것입니다.

예:

1) 이벤트 핸들러를 바인딩하고 생성자에 입력 할 참조를 만듭니다 (상태에 값이 유지되지 않음)

constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
}

2) 양식 제출 기능 작성 (값은 DOM 구성 요소에서 가져옴)

handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
}

3) 렌더

<form onSubmit={this.handleSubmit}>
    <label>
      Name:
      <input type="text" ref={this.input} />
    </label>
    <input type="submit" value="Submit" />
</form>

제어되지 않은 구성 요소 를 사용 하는 경우 handleChange함수 를 바인딩 할 필요가 없습니다 . 양식이 제출되면 DOM에서 값을 가져 오며이 시점에서 필요한 유효성 검증이 수행 될 수 있습니다. 입력 구성 요소에 대한 처리기 함수를 만들 필요가 없습니다.

당신의 문제

이제 문제에 대해 :

… 정수를 입력했을 때 ‘Enter’를 누르면 호출됩니다.

이 작업을 수행하려면 제어되지 않은 구성 요소를 사용하십시오. 필요하지 않은 경우 onChange 핸들러를 작성하지 마십시오. enter키는 양식을 제출하고 handleSubmit기능이 발사됩니다.

변경 사항 :

요소에서 onChange 호출을 제거하십시오.

var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
    //    bsStyle: this.validationInputFactor(),
    placeholder: this.initialFactor,
    className: "input-block-level",
    // onChange: this.handleInput,
    block: true,
    addonBefore: '%',
    ref:'input',
    hasFeedback: true
});

양식 제출을 처리하고 입력을 확인하십시오. 양식 제출 함수에서 요소의 값을 가져 와서 유효성을 검증해야합니다. 생성자에서 요소에 대한 참조를 작성하십시오.

  handleSubmit(event) {
      // Get value of input field
      let value = this.input.current.value;
      event.preventDefault();
      // Validate 'value' and submit using your own api or something
  }

제어되지 않은 구성 요소의 사용 예 :

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    // bind submit function
    this.handleSubmit = this.handleSubmit.bind(this);
    // create reference to input field
    this.input = React.createRef();
  }

  handleSubmit(event) {
    // Get value of input field
    let value = this.input.current.value;
    console.log('value in input field: ' + value );
    event.preventDefault();
    // Validate 'value' and submit using your own api or something
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

답변

const onEnter = (event, callback) => event.key === 'Enter' && callback()

<input
    type="text"
    placeholder="Title of todo"
    onChange={e => setName(e.target.value)}
    onKeyPress={e => onEnter(e, addItem)}/>