createRef在无状态无响应组件中无法正常工作

时间:2018-05-09 01:55:01

标签: reactjs

下面的代码抛出了一个类型错误:'无法读取属性“焦点”为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;

2 个答案:

答案 0 :(得分:3)

请按照here所述使用useRef

此函数创建在功能组件生命周期中处于活动状态的可变对象。

答案 1 :(得分:2)

问题可能是这一行:

<h3 className="card-title" onClick={editing(true)} >

你想做的事情可能就像onClick={() => {editing(true)}}

并且由于您设置ref的第一个input最初未呈现,因此永远不会设置current