如何将光标位置保持在react输入元素中

Question

光标一直走到尽头.从字符串中间编辑时如何保持光标位置？

我使用的代码是:

const rootElement = document.getElementById('root');

class MyFancyForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {myValue: ""};
    }

    handleCommaSeparatedChange = event => {
        const {value} = event.target;
        this.setState({myValue: value});
    };




    render() {
        return(
            <form >

                <div>
                    <label>
                        Cursor position looser
                        <br />
                        <input onChange={this.handleCommaSeparatedChange} value={this.state.myValue} />
                    </label>
                </div>


            </form>
        )
    }
}

const element = <MyFancyForm />;

ReactDOM.render(element, rootElement);

任何想法我怎么能实现它？

Answer 1

只需更改value为defaultValue- 它对我来说在 codepen 和 codeandbox 中都有效

class MyFancyForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {myValue: ""};
    }

    handleCommaSeparatedChange = event => {
        const {value} = event.target;
        this.setState({myValue: value});
    };




    render() {
        return(
            <form >

                <div>
                    <label>
                        Cursor position looser
                        <br />
                        <input onChange={this.handleCommaSeparatedChange} defaultValue={this.state.myValue} />
                    </label>
                </div>


            </form>
        )
    }
}


  ReactDOM.render(
    <MyFancyForm />,
    document.getElementById('root')
  );