Question

我有一个基本可编辑列表项的组件，它们按如下方式运行：

我的问题是光标没有移动到输入框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（类型表示＆＃39;角色＆＃39;或＆＃39;任务＆＃39;）

如何在更改时将光标从输入框文本末尾开始？谢谢

Answer 1

安装组件时会触发自动对焦。不确定您的条件渲染是否发生了这种情况。您可以将条件逻辑移动到单独的容器中，并且每次显示时都应触发挂载。

Answer 2

我最终在回调中设置了焦点，导致输入框显示：

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

将光标放在输入框onChange;应对

2 个答案: