材质 UI 文本字段不是从字段末尾开始

Question

我有一个可编辑字段 - 当状态为 isEditing 时，我呈现一个文本字段，而当 !isEditing 显示一个禁用的文本字段时。

单击文本字段时，会呈现一个表单，以便用户可以编辑该字段。

我遇到的问题是，当呈现可编辑的文本字段时，光标从文本字段的开头开始。

我怎样才能使可编辑的文本字段首次呈现时光标将从字段的末尾开始？

我已经尝试添加自动对焦，但我仍然遇到同样的问题。

if (!isEditing) {
    return (
            <TextField
                className={classes.text}
                disabled
                multiline={multiline}
                value={value}
                name={name}
                onClick={handleEditClick}
                onMouseEnter={handleMouseOver}
                onMouseLeave={handleMouseOver}
                InputProps={{
                    classes: {
                        disabled: classes.disabled,
                        root: classes[variant]
                    }
                }}
            />

    )
}

if (isEditing) {
    return (
        <form onSubmit={submitEdit}>
            <TextField
                autoFocus
                className={classes.text}
                value={tempEditingValue}
                onChange={handleEditChange}
                multiline={multiline}
                name={name}
                InputProps={{
                    classes: {
                        disabled: classes.disabled,
                        root: classes[variant]
                    }
                }}
            />
            <div>
            <Button className={classes.btn} variant='contained' color='secondary' type='submit' >Save</Button>
            <Button className={classes.btn} variant='contained' color='primary' onClick={resetTempEditingValue}>Cancel</Button>
            </div>
        </form>
    )

Answer 1

尝试添加到 TextField：

onFocus={function(e) {
    var val = e.target.value;
    e.target.value = '';
    e.target.value = val;
}}

另见React autoFocus sets cursor to beginning of input value