終極版形式 - 光標跳到輸入字段結束

我有下面的類終極版形式 - 光標跳到輸入字段結束

export default class TestInput extends Component { 

    state = { 
     modified: false 
    }; 

    change = e => { 
     this.setState({ modified: true }); 
     this.props.input.onChange(e.target.value); 
    }; 

    render() { 
     return (
      <input type="text" value={this.props.input.value} onChange={this.change} className={!this.state.modified && this.props.meta.pristine ? 'default' : 'modified'} /> 
     ); 
    } 
}

，我使用這樣的

<Field component={TestInput} name="testProp" />

每當我將光標在中間字段中的文本並寫入一個字母，該字母出現在正確的位置，但光標跳轉到字段的末尾。這是由行this.setState({ modified: true });和隨後的類更改引起的。如果我評論這條線，這不會發生。我不明白。我究竟做錯了什麼？我能做點什麼嗎？

來源

2017-06-01 samuelg0rd0n

這發生在onChange事件，即每次嘗試改變輸入的值你change()功能被炒魷魚，時間，你有一個this.setState({ modified: true })正如你可能知道，this.setState強制組件重新呈現，並知道這一次，因爲!this.state.modified將返回false，所以班級變爲modified，這意味着它工作得很好，光標跳到最後可能有你的modified類，除了沒有什麼錯。

您可能需要查看並更改您的問題，您希望發生什麼？

來源

2017-06-01 12:11:34 aditya

我只需要光標不要跳轉到輸入的末尾。就這樣。這與班級本身毫無關係。這只是一個例子。這些類實際上不存在。如果我不改變班級，光標會留在我寫的信後的正確位置。那麼，我應該做什麼不同呢？ – samuelg0rd0n

你最想做什麼，如果你不想讓光標去任何地方，你爲什麼不就這樣，刪除變化類的條件語句，這肯定與你的類有關，如果你說**如果我不改變類，光標停留在其正確的位置** – aditya

但這不是一個解決方案:-(我需要改變輸入類，這是一個合法的要求，isn'但是同時，這種方式會使光標變得麻木，我簡直失去了我所做的錯誤或者我應該使用的其他方法。 – samuelg0rd0n

終極版形式 - 光標跳到輸入字段結束

回答

相關問題