將光標置於輸入框內onChange;反應

我有這樣的基本操作編輯列表中的項目的一個組成部分：將光標置於輸入框內onChange;反應

我的問題是，不移動光標到輸入框onChange，從而爲用戶隨時點擊兩次麻煩。我試過https://coderwall.com/p/0iz_zq/how-to-put-focus-at-the-end-of-an-input-with-react-js，但沒有奏效。組件的樣子：

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

我的工作的項目現在只能有一個名稱和ID（類型表示一種「角色」或「任務」）

我怎樣才能使光標開始在輸入框文本結尾的變化？謝謝

來源

2017-06-05 codyc4321

SO確定我明白了 - 當你點擊'li'時，它會變成'input'，並且你希望光標位於'inp中的文本末尾ut'一旦它從'li'變成了'input' ...是它嗎？ – Ted

是的，就是這樣。現在輸入框打開，沒有光標 – codyc4321

安裝組件時會自動觸發對象。不確定這是由你的條件渲染髮生的。您可以將條件邏輯移動到單獨的容器，並且每次顯示時都應該觸發掛載。

來源

2017-06-05 21:23:32

我最終將焦點設置在引起輸入框，顯示回調：

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

然後將原來的解決方案給定的工作：

// 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 
    }

和

<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} } 
    />

來源

2017-06-05 21:40:59 codyc4321

將光標置於輸入框內onChange;反應

回答

相關問題