时间戳

首页 > 解决方案 > 在 React 中选择多个子元素之一的正确方法是什么？

javascript - 在 React 中选择多个子元素之一的正确方法是什么？

问题描述

我的新 React 应用程序有一小部分，其中包含一个文本块AllLines，被分割成称为Line. 我想让它工作，以便当单击一行时，它将被选中并可编辑，而所有其他行将显示为<p>元素。我怎样才能最好地管理这里的状态，以便在任何给定时间只选择一条线？我正在努力的部分是确定哪个Line元素已被单击以使父级可以更改其状态。

我知道我可以完成这项工作的方法，但我对 React 还比较陌生，并试图通过正确地做事来让我的头脑进入“在 React 中思考”，所以我很想知道在这种情况下什么是最佳实践.

class AllLines extends Component {
    state = {
        selectedLine: 0,
        lines: []
    };

    handleClick = (e) => {
        console.log("click");
    };

    render() {
        return (
            <Container>
                {
                    this.state.lines.map((subtitle, index) => {
                        if (index === this.state.selectedLine) {
                            return (
                                <div id={"text-line-" + index}>
                                    <TranscriptionLine
                                        lineContent={subtitle.text}
                                        selected={true}
                                    />
                                </div>
                            )
                        }
                        return (
                            <div id={"text-line-" + index}>
                                <Line
                                    lineContent={subtitle.text}
                                    handleClick={this.handleClick}
                                />
                            </div>
                        )
                    })
                }
            </Container>
        );
    }
}

class Line extends Component {

    render() {
        if (this.props.selected === true) {
            return (
                <input type="text" value={this.props.lineContent} />
            )
        }
        return (
            <p id={} onClick={this.props.handleClick}>{this.props.lineContent}</p>
        );
    }
}

标签： javascriptreactjs

解决方案

就您而言，没有更简单的方法。当前状态selected Line是“高于”行集合（父），这是正确的（对于兄弟姐妹需要知道的情况）。

但是，您可以大大简化代码：

<Container>
{this.state.lines.map((subtitle, index) => (
    <div id={"text-line-" + index}>
        <Line
            handleClick={this.handleClick}
            lineContent={subtitle.text}
            selected={index === this.state.selectedLine}
        />
    </div>
))}
</Container>

对于Line组件，使用函数式组件是一种很好的做法，因为它是无状态的，甚至不使用任何生命周期方法。

编辑：添加了缺少的右括号

推荐阅读