Reactjs createRef在react无状态组件中工作不正常
下面的代码抛出一个typeerror:“无法读取null的属性”focus“。在react的文档中,这应该是可行的注意:父组件实现了redux connect方法,但我不确定为什么这会对该组件产生任何影响Reactjs createRef在react无状态组件中工作不正常,reactjs,Reactjs,下面的代码抛出一个typeerror:“无法读取null的属性”focus“。在react的文档中,这应该是可行的注意:父组件实现了redux connect方法,但我不确定为什么这会对该组件产生任何影响 import React, { Component, createRef } from 'react'; import './Card.scss'; const Card = ({isEditing, item, onBlur, onChange}) => { let inputT
import React, { Component, createRef } from 'react';
import './Card.scss';
const Card = ({isEditing, item, onBlur, onChange}) => {
let inputText = createRef();
const editing = (editMode) => {
if (editMode) {
inputText.current.focus();
}
return e => {
e.stopPropagation();
isEditing(item, editMode);
};
}
const update = () => {
return e => {
onChange(item.id, e.target.value);
}
}
return (
<div className="card">
<img className="card-image" src="https://picsum.photos/200/200"
alt="no image display" />
<div className="card-body">
{item.edited ? (
<div>
<input type="text" ref={inputText} onClick={e =>
e.stopPropagation()} value={item.name} onBlur=
{editing(false)}
onChange=
{update()} />
</div>
) : (
<h3 className="card-title" onClick={editing(true)} >
{item.name}
</h3>
)}
</div>
</div>
);
}
export default Card;
import React,{Component,createRef}来自'React';
导入“/Card.scss”;
常量卡=({isEditing,item,onBlur,onChange})=>{
让inputText=createRef();
常量编辑=(编辑模式)=>{
如果(编辑模式){
inputText.current.focus();
}
返回e=>{
e、 停止传播();
i编辑(项目,编辑模式);
};
}
常数更新=()=>{
返回e=>{
onChange(item.id,e.target.value);
}
}
返回(
{item.edited(
e、 stopPropagation()}值={item.name}onBlur=
{编辑(假)}
onChange=
{update()}/>
) : (
{item.name}
)}
);
}
导出默认卡;
问题可能是这一行:
<h3 className="card-title" onClick={editing(true)} >
可能您想要做的是类似于onClick={()=>{editing(true)}}
由于设置ref的第一个
输入
最初没有呈现,因此当前的永远不会被设置。请按说明使用useRef
此函数可创建在功能组件生命周期中处于活动状态的可变对象。文档的可能副本表示您不能将引用分配给功能组件,而不是说您不能在功能组件内部使用引用。要进一步了解@Dane添加的内容,您可以使用forwardRef对功能组件使用引用