我的新 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>
);
}
}
最佳答案
就您而言,没有比这更简单的方法了。当前所选
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
组件,使用函数式组件是一种很好的做法,因为它是无状态的,甚至不使用任何生命周期方法。
编辑:添加缺少的右括号
关于javascript - 在 React 中选择众多子元素之一的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60188052/