프로그래밍 내가 반응 초보자를 그리고 난 아주 간단한 사용 케이스, UI 기능, 실천하기 위해 노력하고있어 입력

Question

에 초점을 어떻게 반응하는지 :

1. 는
을 몇 가지 내용으로 라벨이를 클릭하면
2. 은, 텍스트 입력이 가능한 라벨의 내용으로 대체
내용을 편집 할 수 있습니다
3. 사용자
4. 누르면 입력하면, 입력이 숨기고 레이블 업데이트 된 내용으로 돌아

나는 마침내 모든 올바른 (MongoBD 백엔드, redux 등으로) 사실을 얻을 수 있었고, 내가 할 수 없었던 유일한 것 (인터넷 검색 및 유사한 게시물을 읽고 완료하는 데에 돈을 지불했다)은

내 텍스트 입력이 나타나면 포커스를 전송할 수 없습니다! 우선 피곤이 방법 :

<div className={((this.state.toggleWordEdit) ? '' : 'hidden')}> 
<input id={this.props.word._id} className="form-control" 
     ref="updateTheWord" 
     defaultValue={this.state.word} 
     onChange={this.handleChange} 
     onKeyPress={this.handleSubmit} 
     autoFocus={this.state.toggleWordEdit}/></div> 
    <div className={((this.state.toggleWordEdit) ? 'hidden' : '')}> 
     <h3 onClick={this.updateWord}> 
     {this.state.word}</h3> 
    </div> 

하지만 오토 포커스가 있는지 (나는 오토 포커스가 쓸모하고, 양식이 렌더링되기 때문에 "추측"하지만 숨겨진 상태에서) 작동하지 않았다.

다음으로는 제안의 많은 나는 구글과 S.O.F :

this.refs.updateTheWord.focus(); 

함께 유사한 제안을 모두 작동하지 않았다 발견, 내 this.updateWor에 노력했다. 또한 나는 속일려고 노력했다. 단지 내가 무엇인가 할 수 있는지를보기 위해서였다. 실제 DOM을 사용했습니다 :

const x = document.getElementById(this.props.word._id); 
    x.focus(); 

그리고 작동하지 않았습니다. 심지어 단어를 넣기 위해 이해할 수없는 한 가지는 다음과 같은 제안입니다. having ref as a method (I "guess") 이 구성 요소의 배수가 있고 구성 요소 당 가치를 얻으려는 참조가 필요하기 때문에 시도하지 않았습니다. 내 심판이 지명되지 않는다면 상상할 수 없습니다. 어떻게 가치를 얻을 수 있습니까?

제 생각에는 양식을 사용하지 않는 경우 (레이블을 대체하는 단일 입력 상자가 필요하기 때문에) CSS (부트 스트랩) 일 때 그 초점을 설정할 수있는 방법을 이해할 수 있도록 아이디어를 제공해 주시겠습니까? 수업은 '숨겨진'제발?

Answer 1

당신이 심판을 사용하는 방법이 더 이상 선호되지 않습니다. 그렇지 않으면 더 이상 모범 사례가 아닙니다. 이 같은 것을 시도하십시오

class MyClass extends React.Component { 
    constructor(props) { 
    super(props); 
    this.focus = this.focus.bind(this); 
    } 

    focus() { 
    this.textInput.focus(); 
    } 

    render() { 

    return (
     <div> 
     <input 
      type="text" 
      ref={(input) => { this.textInput = input; }} /> 
     <input 
      type="button" 
      value="Set Focus" 
      onClick={this.focus} 
     /> 
     </div> 
    ); 
    } 
}