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

나는 Bootstrap을 처음 사용 하고이 문제에 봉착했습니다. 입력 필드가 있고 한 자리를 입력하자마자 from 함수 onChange가 호출되지만 정수가 입력되면 'Enter'를 누를 때 호출되기를 원합니다. 유효성 검사 기능과 동일한 문제-너무 빨리 호출됩니다.

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

에 따르면 문서 반응 , 당신은 같은 키보드 이벤트를 수신 할 수 onKeyPress또는 onKeyUp하지 onChange.

var Input = React.createClass({
  render: function () {
    return <input type="text" onKeyDown={this._handleKeyDown} />;
  },
  _handleKeyDown: function(e) {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }
});

업데이트 : React.Component 사용

동일한 작업을 수행하는 React.Component를 사용하는 코드는 다음과 같습니다.

class Input extends React.Component {
  _handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }

  render() {
    return <input type="text" onKeyDown={this._handleKeyDown} />
  }
}

여기 jsfiddle이 있습니다.

업데이트 2 : 기능적 구성 요소 사용

const Input = () => {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      console.log('do validate')
    }
  }

  return <input type="text" onKeyDown={handleKeyDown} />
}

입력 필드에서 onKeyPress를 직접 사용할 수 있습니다. onChange 함수는 모든 입력 필드가 변경 될 때마다 상태 값을 변경하며 Enter를 누르면 함수 search ()를 호출합니다.

<input
    type="text"
    placeholder="Search..."
    onChange={event => {this.setState({query: event.target.value})}}
    onKeyPress={event => {
                if (event.key === 'Enter') {
                  this.search()
                }
              }}
/>

양식 제어 (입력)에 대한 초점이 일반적으로 양식 자체 (입력이 아닌) 에서 (onSubmit) 이벤트를 트리거하여 onSubmit 양식에 바인드 할 수 있을 때 Enter를 누르 십시오 .submitthis.handleInput

또는 포커스를 제거 할 때 발생 하는 blur(onBlur) 이벤트에 바인딩 할 수 있습니다 input(예 : 포커스를 얻을 수있는 다음 요소로 이동)

당신이 사용할 수있는 event.key

function Input({onKeyPress}) {
  return (
    <div>
      <h2>Input</h2>
      <input type="text" onKeyPress={onKeyPress}/>
    </div>
  )
}

class Form extends React.Component {
  state = {value:""}

  handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      this.setState({value:e.target.value})
    }
  }

  render() {
    return (
      <section>
        <Input onKeyPress={this.handleKeyPress}/>
        <br/>
        <output>{this.state.value}</output>
      </section>
    );
  }
}

ReactDOM.render(
  <Form />,
  document.getElementById("react")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

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

반응 버전 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)}/>