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

Question

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

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

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

如何做到这一点，以便在首次呈现可编辑文本字段时，光标将从该字段的末尾开始？

我曾尝试添加autoFocus，但是仍然遇到相同的问题。

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