下面的代码抛出了一个类型错误:'无法读取属性“焦点”为null'。关于react的文档,这应该工作。 注意:父组件实现了redux connect方法,但我不确定为什么这会对此组件产生任何影响。
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;
答案 0 :(得分:3)
请按照here所述使用useRef
。
此函数创建在功能组件生命周期中处于活动状态的可变对象。
答案 1 :(得分:2)
问题可能是这一行:
<h3 className="card-title" onClick={editing(true)} >
你想做的事情可能就像onClick={() => {editing(true)}}
并且由于您设置ref的第一个input
最初未呈现,因此永远不会设置current
。