Javascript 使用React操作动态DOM

我有一个动态表格，希望它只在点击时聚焦，而不是点击时聚焦。我使用MouseDown事件、MouseUp事件和Focus事件来控制它。现在是牢房

<th tabIndex="0" 
    scope="col" 
    ref={this.myRef} 
    onMouseDown={this.testRef} 
    onMouseUp={this.testTwo} 
    onFocus={this.testThree}>Date</th>

日期

工作。但是，我希望每个单元格都有这种操作，而不需要手动创建这么多ref等等。我怎样才能做到这一点

我的代码如下：

类应用程序扩展组件{
状态={
意见书：[
{
名称：“猫”，
日期：12234，
"嗯",，
塔吉朗：“到”
},
{
名称：“猪”，
日期：3456，
"ko",，
塔吉朗：“op”，
文件：[{fileName:“piggy”，键入：“small”}]
},
{
名称：“鱼”，
日期：3456，
"ko",，
塔吉朗：“op”
},
{
名字：“狗”，
日期：3456，
"ko",，
塔吉朗：“op”，
档案：[
{fileName:“doggy”，键入：“small”}，
{fileName:“puppy”，键入：“supersmall”}
]
},
{
名称：“蜘蛛”，
日期：3456，
"ko",，
塔吉朗：“op”
}
],
styleFocus:false，
穆斯敦：错
};
myRef=React.createRef（）；
testRef=（）=>{
this.setState（{mouseDown:true}）
this.myRef.current.blur（）；
日志（“测试”，this.myRef.current）；
}
testTwo=（）=>{
console.log（“testUp”）；
this.myRef.current.blur（）；
//if（this.state.mouseDown）{
//this.myRef.current.blur（）
//  }
}
测试三=（）=>{
log（“testFocus”）；
if（this.state.mouseDown）{
this.myRef.current.blur（）
}
//this.setState（{mouseDown:false}）
否则这个.myRef.current.focus（）；
this.setState（{mouseDown:false}）
}
handleFocus=（）=>{
this.setState（{styleFocus:！this.state.styleFocus}）；
};
render（）{
const{name，date，sourceLang，targetLang}=this.state；
返回(
桌子
文件或文件夹
名称
日期
源语言
目标语言
功能
{this.state.submissions.map（（submission，i）=>(
))}

);
}
}
导出默认应用程序
您只想重用这些道具吗

tabIndex="0" 
scope="col" 
ref={this.myRef} 
onMouseDown={this.testRef} 
onMouseUp={this.testTwo} 
onFocus={this.testThree}

如果是，您可以使用它创建一个对象并使用。例如：

const defaultProps = {
  onClick: () => console.log('cliked!'),
  styles: { color: 'red' }
}

<span {...defaultProps}>foo</span>
<span {...defaultProps}>bar</span>

const defaultProps={
onClick:（）=>console.log（'cliked！'），
样式：{color:'red'}
}
福
酒吧