2017-06-05 30 views
0

我有这样的基本操作编辑列表中的项目的一个组成部分: enter image description here将光标置于输入框内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(类型表示一种“角色”或“任务”)

我怎样才能使光标开始在输入框文本结尾的变化?谢谢

+0

SO确定我明白了 - 当你点击'li'时,它会变成'input',并且你希望光标位于'inp中的文本末尾ut'一旦它从'li'变成了'input' ...是它吗? – Ted

+0

是的,就是这样。现在输入框打开,没有光标 – codyc4321

回答

1

安装组件时会自动触发对象。不确定这是由你的条件渲染发生的。您可以将条件逻辑移动到单独的容器,并且每次显示时都应该触发挂载。

0

我最终将焦点设置在引起输入框,显示回调:

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