javascript - 如何使用javascript在从下拉菜单中选择的值旁边设置插入符号位置？

Question

我想在使用javascript从下拉菜单中选择值之后将插入符号放置在输入字段中？

考虑在输入字段中我输入了“选定值”，现在我将光标放在选定值和值之间，如下所示

选定的^值

现在从下拉列表中，我选择一些值说“巧克力”，所以输入字段中的值如下所示

精选巧克力价值^

并且插入符号的位置在输入值的末尾。而我希望它位于字符串巧克力的末尾，如下所示

选择的巧克力^值

我该怎么做...有人可以帮我解决这个问题。谢谢。

以下是我尝试过的。

class input extends React.Purecomponent {
    constructor(props){
        super(props) {
            this.input_ref=React.createRef();
            this.state = {
                input_val: '',
            }
        }
     handle_input = (e)=>{
         this.setState({input_val: e.target.value});
     }
     handle_select = (selected_value) => {
         this.setState({input_val: input_val + selected_value});
     }

     render = () => {
        return (
            <input 
                 ref = {this.input_ref}
                 on_change={this.handle_input}
            />
            <Dropdown
                on_change={this.handle_select}
                values={somearray}/>}
        )
     }
}

我没有粘贴与 Dropdown 组件相关的代码，因为它只是呈现菜单。从下拉列表中选择的值将添加到 input_val 状态。