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

Question

我的新 React 应用程序有一小部分，其中包含一个文本 block 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>
        );
    }
}

Answer 1

就您而言，没有比这更简单的方法了。当前所选 Line 的状态是“上方”行集合(父级)，这是正确的(对于 sibling 需要知道的情况)。

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

<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 组件，使用函数式组件是一种很好的做法，因为它是无状态的，甚至不使用任何生命周期方法。

编辑:添加缺少的右括号