Cursor in Eingabefeld onChange setzen; reagieren

Question

ich ein Bestandteil der Grund bearbeitbare Listenelemente, die als solche funktioniert:

Mein Problem ist, dass sich der Cursor nicht in das Eingabefeld bewegt onChange, ein Aufwand für den Benutzer machen immer zweimal klicken. Ich versuchte https://coderwall.com/p/0iz_zq/how-to-put-focus-at-the-end-of-an-input-with-react-js, aber es hat nicht funktioniert. Komponente wie folgt aussieht:

import React from 'react'; 

import MyComponent from '../utils/MyComponent'; 


export default class BasicList extends MyComponent { 

    constructor(props) { 
     let custom_methods = ['renderItemOrEditField', 'toggleEditing', 'moveCaretAtEnd']; 
     super(props, custom_methods); 
     this.state = {editing: null}; 
    } 

    moveCaretAtEnd(e) { 
     var temp_value = e.target.value 
     e.target.value = '' 
     e.target.value = temp_value 
    } 

    renderItemOrEditField(item) { 
     console.log(item); 
     if (this.state.editing === item.id) { 
      return (
       <input 
        onKeyDown={ this.handleEditField } 
        type="text" 
        className="form-control" 
        ref={ `${item.type}_name_${ item.id }` } 
        name="title" 
        autofocus 
        onFocus={this.moveCaretAtEnd} 
        defaultValue={ item.name } 
       /> 
      ); 
     } else { 
      return (
       <li 
        onClick={this.toggleEditing.bind(null, item.id)} 
        key={item.id} 
        className="list-group-item"> 
        {item.name} 
       </li> 
      ); 
     } 
    } 

    toggleEditing(item_id) { 
     this.setState({editing: item_id}); 
    } 


    render() { 
     let li_elements = null; 
     let items = this.props.items; 

     if (items.length > 0) { 
      li_elements = items.map((item) => { 
       return (
        this.renderItemOrEditField(item) 
       // {/* }<li key={item.id}> 
       //  {item.name} - 
       //  <button onClick={() => {this.props.deleteCallback(this.props.item_type, item.id, item.name)} }> 
       //   Delete 
       //  </button> 
       // </li> */} 

      ); 
      }); 
     } 

     return (
      <div> 
      <h4>{this.props.title}:</h4> 
       <ul className="list-group"> 
        {li_elements} 
       </ul> 
      </div> 
     ); 
    } 
} 

Die Artikel Ich arbeite mit jetzt haben nur einen Namen und eine ID (Typ bezeichnet eine ‚Rolle‘ oder ‚Aufgabe‘)

Wie kann ich den Cursor Anfang machen am Ende des Eingabefeldes Text bei Änderung? Danke

Answer 1

Autofokus wird ausgelöst, wenn eine Komponente montiert ist. Ich bin mir nicht sicher, ob das mit dem bedingten Rendern passiert. Sie können Ihre bedingte Logik in einen separaten Container verschieben, der jedes Mal eine Mount-Meldung auslöst.

Answer 2

Ich landete Fokuseinstellung wie in dem Rückruf, der das Eingabefeld zeigen Ursachen:

toggleEditing(item_id) { 
     // this syntax runs the function after this.setState is finished 
     this.setState({editing: item_id}, function() { 
      this.textInput.focus(); 
     }); 
    } 

Dann wird die ursprüngliche Lösung gearbeitet Gegeben:

// https://coderwall.com/p/0iz_zq/how-to-put-focus-at-the-end-of-an-input-with-react-js 
    moveCaretAtEnd(e) { 
     var temp_value = e.target.value 
     e.target.value = '' 
     e.target.value = temp_value 
    } 

und

<input 
     onKeyDown={ this.handleEditField } 
     type="text" 
     className="form-control" 
     ref={(input) => { this.textInput = input; }} 
     name="title" 
     autofocus 
     onFocus={this.moveCaretAtEnd} 
     defaultValue={ item.name } 
     onChange={(event) => this.editItem(event)} 
     style={ {maxWidth: 500} } 
    />