Jquery 또는 요소를 하드 코딩하지 않고 텍스트 상자를 지움

Question

사용자가 처음 세 문자를 입력하면 텍스트 상자에 채우기 위해 자동 완성 옵션 목록을 드롭 다운하는 텍스트 상자가 있습니다. 자동 완성 옵션 중 하나를 클릭하면 텍스트 상자를 지우고 싶습니다. 그 요소가 지금과 같은 모습입니다 :

<label 
     className="searchSecondary_userFilterFacet" 
     hidden={!this.state.isExpanded} 
    > 
     <div 
     className="data-uk-autocomplete" 
     id="userFilterTypeahead" 
     ref={elem => (this.userFilterTypeahead = elem)} 
     > 
     <input 
      id="textInput_userSearch" 
      onKeyUp={this._handleNewUser} 
      placeholder="Search Users" 
      type="text" 
      ref={input => (this.userInput = input)} 
     /> 
     </div> 
     {userModifiers} 
    </label> 

나는 React를 사용하고 있습니다.

componentDidMount() { 
let element = ReactDOM.findDOMNode(this.userFilterTypeahead); 

//bind selection event for user filter autocompletion uikit 
$('#userFilterTypeahead').on(
    'selectitem.uk.autocomplete', 
    function(event, data, acobject) { 
    $('#textInput_userSearch').val(''); 
    this._editUsersBuffer(data.value, true, true); 
    }.bind(this) 
); 

}

무엇보다도 실제로 체크 박스를 삭제하는 JQuery와 라인을 제거해야 다음은 텍스트 상자를 취소하려면 코드가 현재 모습입니다. 나는 그것을 this.userInput.value=""으로 바꾸는 것이 효과가 없었고 어떤 것도 event.target.value=""하지 않았 음을 알았습니다. 둘째, Jquery 줄을 $('#userFilterTypeahead').on( 'selectitem.uk.autocomplete',... 제거하고 싶습니다. 그러나 selectitem.uk.autocomplete 이벤트가 발생할 때 여전히 내 텍스트 지우기를 트리거해야합니다. 그래서,이 Jquery를 대체하고 싶습니다 및 단일 텍스트 상자를 지우는 함께 제공되는 복잡성에 당황한.

Answer 1

다음은 ref를 사용하는 방법입니다.하지만 ref를 사용하지 않고도 쉽게이 작업을 수행 할 수 있기 때문에 정직하게 바인딩 할 것입니다. 요소를 집중하지 않고 지우지 않으면 일반적으로 사용하지 않는 것이 좋습니다. 두 가지 예를 들어 보았습니다.

자동 완성에 많이 의존한다면 사전 빌드 된 모듈을 사용하는 것이 좋습니다. 그러나 아래에 링크 된 예제는 매우 유사하지만 데이터를 받아들이도록 만들어졌습니다. 쿼리가 일치 할 때 입력 필드 아래에 표시된 결과 목록을 렌더링합니다. https://github.com/moroshko/react-autosuggest

예 사용 상태 :

class App extends React.Component { 
 
    state = { 
 
    query: '', 
 
    } 
 
    clearInput =() => this.setState({ query: "" }); 
 
    setQuery = (evt) => this.setState({ query: evt.target.value }); 
 
    mockSelection =() => { 
 
    if (this.state.query !== '') { 
 
     return <div onClick={this.clearInput}>Click me to clear input</div>; 
 
    } 
 
    return null; 
 
    } 
 
    render(){ 
 
    return (
 
     <div> 
 
     <input 
 
      type="text" 
 
      placeholder="Please enter a query" 
 
      value={this.state.query} 
 
      onChange={this.setQuery} 
 
     /> 
 
     {this.mockSelection()} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

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

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

예 REF (권장하지 않음)를 사용하여 다음

class App extends React.Component { 
 
    state = { 
 
    query: '', 
 
    } 
 
    clearInput =() => this.inputQuery.value = ""; 
 
    setQuery = (evt) => this.setState({ query: evt.target.value }); 
 
    mockSelection =() => { 
 
    if (this.state.query !== '') { 
 
     return <div onClick={this.clearInput}>Click me to clear input</div>; 
 
    } 
 
    return null; 
 
    } 
 
    render(){ 
 
    return (
 
     <div> 
 
     <input 
 
      type="text" 
 
      ref={input => this.inputQuery = input} 
 
      placeholder="Please enter a query" 
 
      value={this.state.query} 
 
      onChange={this.setQuery} 
 
     /> 
 
     {this.mockSelection()} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

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

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

,174을