는

Question

내가 이런 검색 입력에 onSearch 이벤트를 사용하기 위해 노력하고있어 'onSearch'알 수없는 소품 반응?

사용자가 키보드의 "검색"아이콘을 클릭 할 때 이벤트를 발생시키는 자동 완성 입력을 생성하려고합니다.

편집 : 나는 그것을 지원 못해 반응 추측 있도록

onSearch은 표준 속성이 아닙니다. onSearch는 타격과 동일하기 때문에 일을 할 것입니다 때 onKeyPress를 사용하여 키를 입력 :

render() { 
    return (
    <main> 
     <input onKeyPress={ this.onKeyPress } type="search" list="options"/> 
     <datalist id="options"> 
     { OPTS.map(item => <option value={ item.nm } key={ item.id } data-id={ item.id } />) } 
     </datalist> 
    </main> 
    ); 
    } 


onKeyPress(event) { 
    if (event.key === 'Enter') { 
    const id = document.querySelector(`#options option[value="${event.target.value}"]`).dataset.id; 
    if (id) { 
     console.warn('user search', id); 
    } 
    } 
} 

Answer 1

난 당신이 onChange 찾고있는 생각합니다. 입력은 내부에서 데이터를 편집 할 때 변경 이벤트를 발생시킵니다.

EDIT : 은 Docs에 의해 지원되지 않습니다. 동일한 작업을 수행하려면 keypress 이벤트 또는 keyup 이벤트를 사용할 수 있습니다.

constructor() { 
    this.state = { userInput: "" }; 

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

handleSubmit() { 
    console.warn('user search', this.state.userInput); 
} 

render() { 
    return (
    <form onSubmit={handleSubmit}>  
     <input 
     onChange={e => this.setState({userInput: e.target.value})} 
     type="search" 
     list="options" 
     value={this.state.userInput} 
     /> 
     <datalist id="options"> 
     { OPTS.map(item => <option value={ item.nm } key={ item.id } data-id={ item.id } />) } 
     </datalist> 
    </form> 
); 
} 

이 https://facebook.github.io/react/docs/forms.html를 살펴 보자 : 단지

handleKeyPress = (e) => { 
    if(e.keyCode === 13) { 
     console.warn('search'); 
    } 
} 

<input type="search" onKeyPress={this.handleKeyPress} /> 

Answer 2

나는이 같은 일을해야 생각하는 키 코드를 확인하고이 (13)를 입력되는지 확인합니다. 입력 값을 얻으려면 직접 DOM에 액세스하는 대신 제어 된 구성 요소를 사용하는 것이 좋습니다.

Answer 3

search은 절대적으로 검색 유형 input의 DOM 이벤트이지만 반응은 아직 지원하지 않습니다. 그래서 원시 DOM 요소 이벤트를들을 수 있습니다.

는 이유를 알고 할 수 있습니다, 작업 할 수이

<Input 
    ref={element=>(element||{}).onsearch=this.searchHandler} 
/> 

이 좋아해요.

먼저 ref 속성은 값으로 함수를 받아들입니다.이 값은 실제 dom 요소 (가상 dom과 반대)와 함께 실행됩니다.

실제 DOM이 문서에 마운트되기 전에 함수도 실행되지만 이벤트를 첨부 할 수있는 요소가 없으므로 오류를 방지하기 위해 (element||{})을 사용합니다.

대신 addEventListener를 사용하는 search 이벤트 핸들러 함수가 될 수 있습니다 해고 소품 또는 상태 업데이트, 렌더링 함수가 호출 될 때마다 우리는 DOM 요소에 이벤트를 첨부 할 때 구성 요소가 다시 쓰게하기 때문에, 우리는 ele.onsearch 방법을 사용 여러 번 실행하십시오.