Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/react-native/7.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs createRef在react无状态组件中工作不正常_Reactjs - Fatal编程技术网

Reactjs createRef在react无状态组件中工作不正常

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

下面的代码抛出一个typeerror:“无法读取null的属性”focus“。在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;
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对功能组件使用引用