Question

我有一个由react-redux“ connect（）”函数包装的组件，我必须使用React中的Refs管理<textarea>。

我正在使用此版本的react / react-redux / redux： “ react”：“ ^ 16.13.1”， “ react-redux”：“ ^ 7.2.1”， “ redux”：“ ^ 4.0.5”，

我整天都在搜寻Google，但是我看到了所有可以帮助我的东西。

使用钩子的人... 好，但是在此阶段，我不想使用它们，因为我必须先研究它们

有人说“您可以在包装器组件上放置引用” ... 好吧，但是在我进行Google搜索的8小时中，我不知道该怎么做？

有人可以帮助我理解并告诉我如何编写正确的代码吗？谢谢

我组件的代码如下：

class EditorArea extends Component {
    constructor(props) {
        super(props)
        this.textAreaRef = React.createRef();
    }

    render() {

        const {
            handleEditorChange,
            handleTextSelection,
            markdownText } = this.props;

        return (
            <Fragment>
                <div id="editor-area">
                    <div id="text-area">
                        <textarea
                            id="editor"
                            ref={this.textAreaRef}
                            onChange={handleEditorChange}
                            onClick={() => handleTextSelection(this.textAreaRef)}
                            onSelect={() => handleTextSelection(this.textAreaRef)}
                            value={markdownText}
                            placeholder="Start here...">
                        </textarea>
                    </div>
                </div>
            </Fragment>
        )

    }
}

const madDispatch = dispatch => {
    return {
        handleEditorChange: (e) => dispatch(handleEditorChange(e)),
        handleTextSelection: () => dispatch(handleTextSelection())
    }

}

const mapState = state => {
    const { editingStatus, markdownText } = state.changeMarkdownText;

    return {
        editingStatus,
        markdownText,
    }
}


export default connect(
    mapState, madDispatch, null, { forwardRef: true }
)(EditorArea);

编辑：我忘了提到我的需求和问题：我需要在动作创建者函数中访问textarea DOM对象的 selectionStart 和 selectionEnd 属性，但是我收到错误消息“ TypeError：无法读取未定义的属性'当前'”

这是我的动作创建者函数：

export const handleTextSelection = (text) => {

    let newTextSelection = {};

    let startSelection = text.current.selectionStart;
    let endSelection = text.current.selectionEnd;

    newTextSelection.startSelection = startSelection;
    newTextSelection.endSelection = endSelection;
 
    return {
        type: MARKDOWN_TEXT_SELECTION,
        payload: newTextSelection
    }
}

Answer 1

我认为您的问题可能出在mapDispatch函数上。您没有将ref作为参数传递，因此它始终调度undefined（空参数）。尝试以下方法：

const madDispatch = dispatch => {
    return {
        handleEditorChange: (e) => dispatch(handleEditorChange(e)),
        //pass a param here: 
        handleTextSelection: (textAreaRef) => dispatch(handleTextSelection(textAreaRef))
    }

}

如何在React-Redux Connect功能中使用Refs处理

1 个答案: