【发布时间】：2018-03-10 12:17:41
【问题描述】：
我正在尝试在 React 中聚焦/突出显示输入文本 onClick。它按预期工作，但仅在渲染数组中的最后一个元素上工作。我尝试了几种不同的方法，但它们都做同样的事情。以下是我所拥有的两个示例：
export default class Services extends Component {
handleFocus(event) {
event.target.select()
}
handleClick() {
this.textInput.focus()
}
render() {
return (
<div>
{element.sources.map((el, i) => (
<List.Item key={i}>
<Segment style={{marginTop: '0.5em', marginBottom: '0.5em'}}>
<Input fluid type='text'
onFocus={this.handleFocus}
ref={(input) => { this.textInput = input }}
value='text to copy'
action={
<Button inverted color='blue' icon='copy' onClick={() => this.handleClick}></Button>
}
/>
</Segment>
</List.Item>
))}
</div>
)
}
如果只有一个元素被渲染，它会将文本集中在输入中，但如果有多个元素，则每个元素的按钮单击只会选择最后一个元素的输入。这是另一个例子：
export default class Services extends Component {
constructor(props) {
super(props)
this._nodes = new Map()
this._handleClick = this.handleClick.bind(this)
}
handleFocus(event) {
event.target.select()
}
handleClick(e, i) {
const node = this._nodes.get(i)
node.focus()
}
render() {
return (
<div>
{element.sources.map((el, i) => (
<List.Item key={i}>
<Segment style={{marginTop: '0.5em', marginBottom: '0.5em'}}>
<Input fluid type='text'
onFocus={this.handleFocus}
ref={c => this._nodes.set(i, c)}
value='text to copy'
action={
<Button inverted color='blue' icon='copy' onClick={e => this.handleClick(e, i)}></Button>
}
/>
</Segment>
</List.Item>
))}
</div>
)
}
这两种方法的响应方式基本相同。我需要 handleClick 输入焦点来处理每个动态渲染的元素。任何意见是极大的赞赏。提前致谢！
Input 组件是从 Semantic UI React 导入的，在我的应用中没有其他实现
更新 谢谢你们的好答案。这两种方法在单个循环元素渲染中效果很好，但现在我正在尝试使用多个父元素来实现它。例如：
import React, { Component } from 'react'
import { Button, List, Card, Input, Segment } from 'semantic-ui-react'
export default class ServiceCard extends Component {
handleFocus(event) {
event.target.select()
}
handleClick = (id) => (e) => {
this[`textInput${id}`].focus()
}
render() {
return (
<List divided verticalAlign='middle'>
{this.props.services.map((element, index) => (
<Card fluid key={index}>
<Card.Content>
<div>
{element.sources.map((el, i) => (
<List.Item key={i}>
<Segment>
<Input fluid type='text'
onFocus={this.handleFocus}
ref={input => { this[`textInput${i}`] = input }}
value='text to copy'
action={
<Button onClick={this.handleClick(i)}></Button>
}
/>
</Segment>
</List.Item>
))}
</div>
</Card.Content>
</Card>
))}
</List>
)
}
现在，在修改后的代码中，您的方法适用于一个 Card 元素，但是当有多个 Card 元素时，它仍然只适用于最后一个元素。 Input Buttons 分别为它们的输入工作，但只在最后呈现的Card 元素上工作。
【问题讨论】：
-
不同之处在于，除了 handleClick 之外，输入上的其他方法对每个元素都可以正常工作。 ref 只选择最后渲染的元素，不选择其他元素。
-
@MerrilJeffs 第二个代码将按预期工作。您在控制台上收到第二个代码的任何错误吗？
-
显示您的
Input组件的代码以了解您如何实现操作 (Button) 事件 -
@MerrilJeffs 第二个代码正在运行。这是工作示例codesandbox.io/s/p3y90wmp7m
标签： javascript reactjs jsx semantic-ui-react