Mrrroring выбор начала и конца // или позиция каретки в двух группах ввода - PullRequest
Новая
       22

Mrrroring выбор начала и конца // или позиция каретки в двух группах ввода

0 голосов
/ 17 июня 2019

Я построил компонент, который содержит два поля ввода, первое берет строку для поиска контента в большем количестве контента под полями ввода.

Второе поле ввода отражает первое и выполняет некоторую коррекцию строки поиска в зависимости от того, что введено.

В настоящее время, если строка поиска превышает ширину страницы, я получаю прокрутку. Я бы хотел, чтобы второе поле ввода прокручивалось вместе с первым, чтобы они отражали друг друга.

У меня сложилось впечатление, что это будет довольно просто, так как я мог бы использовать 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>
        )
    }
...