我必须创建一些动态引用才能将焦点集中在 Input
上它包含在自定义组件中。
目前,这就是我渲染元素的方式:
const countRow = denom => {
this[`${denom.id}-ref`] = React.createRef();
return (
<CountRow
ref={this[`${denom.id}-ref`]}
id={`${denom.name.singular.toLowerCase()}-${denom.id}`}
tenderValue={denom.value}
label={denom.denomination.label}
onChange={(e, value) => this.handleBillsOnChange(e, denom)}
onEnter={() => this.onEnter(denom)}
/>
}
{itterableArray.map(item => countRow(item)}
在我的onEnterFunction
我正在尝试从 <CountRow />
移动到下一个。
在该函数的末尾:
onEnter = denom => {
//some stuff that doesn't matter
this[`${denom.id}-ref`].focus()
}
onEnter
的最后一行功能总是爆炸。说:
TypeError: _this["".concat(...)].focus is not a function
有人可以指导我需要做什么才能选择特定的焦点 <CountRow />
?
最佳答案
示例
const countRow = denom => {
let ref=React.createRef();
let onEnter = () => {
ref.current.focus();
}
//setTimeout(onEnter,3000)
return (
<CountRow
ref={ref}
// id={`${denom.name.singular.toLowerCase()}-${denom.id}`}
// tenderValue={denom.value}
// label={denom.denomination.label}
// onChange={(e, value) => this.handleBillsOnChange(e, denom)}
onEnter={onEnter}
/>)
};
class CountRow extends React.Component {
constructor(props) {
super(props);
this.myRef=React.createRef();
this.focus=()=>this.myRef.current.focus();
}
render() {
return <input type="text" ref={this.myRef}/>
}
}
关于javascript - 使用 refs 将焦点集中在动态生成的组件上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53878876/