在两个输入组中错误选择开始和/或插入符号的位置

Question

我构建了一个包含两个输入字段的组件，第一个输入一个字符串以在输入字段下方搜索更多内容的内容。

第二个输入字段是第一个输入字段的镜像，并根据输入的内容对搜索字符串进行一些校正。

当前，如果搜索字符串超出页面宽度，则会出现滚动行为。我希望第二个输入字段与第一个输入字段一起滚动，以便它们彼此镜像。

我觉得这很简单，因为我可以使用selectionStart / End或任何其他与输入字段插入位置/滚动位置相关的属性。我设置的所有属性似乎都无法使组件呈现不同的外观。

//Heres my input components render
render(...props) {
        return (
            <Row>
                <InputGroup>
                    <Col sm="11" style={{ color: "#343a40" }} >
                        <Input
                            onChange={(e) => {
                                this.props.onChange(e)
                                this.validate(e)
                            }}
                            invalid={this.state.valid !== "valid"}
                            valid={this.state.valid === "valid"}
                            value={this.props.value}
                            selectionStart={this.props.selectionStart}
                            selectionEnd={this.props.selectionEnd}
                        />

                        <FormFeedback valid>
                        </FormFeedback>
                        <FormFeedback invalid>
                            {this.state.valid}
                        </FormFeedback>
                    </Col>
                    <Col sm="1">
                        {this.props.children}
                    </Col>
                </InputGroup>
            </Row>
        )
    }

//And heres a snippet from my component with the inputs within them
  handleCaretPos = (e) => {
        console.log(e.target)

        let start = e.target.selectionStart
        let end = e.target.selectionEnd
        this.setState({
            selectionStart: start,
            selectionEnd:end
        })

    }

    render(...props) {
        return (
            <div className="Header" >
                <MyInputGroup
                    onChange={(e) => {
                        this.props.onChange(e)
                        this.handleCaretPos(e)
                    }}
                    valid={this.state.valid}
                    buttonText="Expand"
                    ButtonDropDown={false}
                    value={this.props.sig}
                    focus={this.state.focus}
                >
                    <Button id="toggle" color="info" onClick={(e) => this.toggleOnClick(e)}>info</Button>
                </MyInputGroup>
                <Collapse isOpen={!this.state.toggle} navbar>
                    <MyInputGroup
                        value={this.props.exactSig}
                        onClick={(e) => this.props.onClick(e)}
                        buttonText="options"
                        ButtonDropDown="true"
                        onChange={""}
                        focus={this.state.focus}
                        selectionStart={this.state.selectionStart}
                        selectionEnd={this.state.selectionEnd}

                    >
                        <DropButton></DropButton>
                    </MyInputGroup>
                </Collapse>
            </div>
        )
    }