输入正在失去对钩子更新的关注

Question

我是 reactjs 新手，我正在尝试从输入中读取数据。问题是当我输入一个标志时，我的输入失去了焦点。但只有当所有逻辑都在函数内部时。 当带有按钮和逻辑的输入位于不同的文件中时 - 它正在工作。我真的不知道为什么......

我已经创建了具有相同代码的单独文件并将其导入到 sollution - 没关系。 我已经尝试过 onChange={handleChange} - 也失去了焦点。

export default function MyInput(){
const [citySearch, updateCitySearch] = useState();

function searchCityClick(){
   alert(citySearch);
}
const SearchComponent = ()=> (
    <div> 
        <input 
        value={citySearch}
        onChange={(e) => updateCitySearch(e.target.value)}/>
        <Button variant="contained" color="primary" onClick={searchCityClick}>
            Search
        </Button>
    </div>

);
return(
    <div>
        <div>
            <SearchComponent />
        </div>
    </div>
)}

Answer 1

SearchComponent 是一个功能组件，不应在另一个组件中定义。在MyInput 中定义SearchComponent 将导致SearchComponent 被重新创建（而不是重新渲染），本质上它的DOM 将被删除，然后在每次点击时重新添加。

解决方案非常简单，从MyInput 中提取SearchComponent，然后通过props 对象传递函数和数据：

const { useState, useCallback } = React;

const SearchComponent = ({ citySearch, updateCitySearch, searchCityClick }) => (
  <div> 
    <input
      value={citySearch}
      onChange={e => updateCitySearch(e.target.value)} />
    
    <button onClick={searchCityClick}>Search</button>
  </div>
);

const MyInput = () => {
  const [citySearch, updateCitySearch] = useState('');

  const searchCityClick = () => alert(citySearch);

  return(
    <div>
      <SearchComponent 
        citySearch={citySearch} 
        updateCitySearch={updateCitySearch}
        searchCityClick={searchCityClick} />
    </div>
  );
};

ReactDOM.render(
  <MyInput />,
  root
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Answer 2

我也是 React 的新手，所以请稍加解释（希望其他人可以详细说明）.. 我相信这与嵌套组件以及 React 如何重新渲染有关..

如果您使用SearchComponent 作为变量，而不是匿名函数，这将按预期工作。

我也很好奇为什么使用这样的嵌套函数（使用 JSX 时）会导致这种行为......可能是反模式？

function MyInput() {
  const [citySearch, updateCitySearch] = React.useState();

  function searchCityClick() {
    alert(citySearch);
  }
  
  const SearchComponent = (
      <div> 
          <input 
          value={citySearch}
          onChange={(e) => updateCitySearch(e.target.value)}/>
          <button variant="contained" color="primary" onClick={searchCityClick}>
              Search
          </button>
      </div>
  );
  
  return (
    <div>
      <div>
        {SearchComponent}
      </div>
    </div>
  );
}


let div = document.createElement("div");
div.setAttribute("id", "app");
document.body.append(div);
ReactDOM.render(<MyInput />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

即使您将嵌套函数更改为“实际组件”，每次按键后焦点都会丢失（又名 onChange）..

不起作用：

function MyInput() {
  const [citySearch, updateCitySearch] = React.useState();

  function searchCityClick() {
    alert(citySearch);
  }

  const SearchComponent = () => {
      return (
        <div> 
            <input 
            value={citySearch}
            onChange={(e) => updateCitySearch(e.target.value)}/>
            <button variant="contained" color="primary" onClick={searchCityClick}>
                Search
            </button>
        </div>
    );
  }

  return (
    <div>
      <div>
        <SearchComponent />
      </div>
    </div>
  );
}

Answer 3

发生这种情况是因为 useState 钩子没有“挂钩”到您的 SearchComponent，而是您的 MyInput 组件。无论何时，您调用updateCitySearch() 都会更改MyInput 的状态，从而强制整个 组件重新渲染。

SearchComponent，在MyInput 中明确定义。当 citySearch-state 更新时，SearchComponent 失去焦点，因为围绕它的初始 virual DOM 不再完整，而是您拥有一个全新的 DOM。从本质上讲，每次 MyInput 按状态更新时，您都会创建一个全新的 SearchComponent。

考虑以下示例：

function App() {
  const [citySearch, updateCitySearch] = useState("");
  console.log("rendered App again"); //always prints
  const SearchComponent = () => {
    console.log("rendered Search"); //always prints
    const searchCityClick = () => {
      alert(citySearch);
    };
    return (
      <div>
        <input
          value={citySearch}
          onChange={e => {
            updateCitySearch(e.target.value);
          }}
        />
        <button onClick={searchCityClick}>Search</button>
      </div>
    );
  };
  return (
    <div>
      <div>
        <SearchComponent />
      </div>
    </div>
  );
}

每次更新状态时，都会触发console.log()，App 组件会重新渲染，SearchComponent 会重新创建。每次都会渲染一个新的 myInput 迭代，并创建一个新的 SearchComponent。

但是如果你要在SearchComponent 中定义useState，那么只有SearchComponent 会重新渲染whens 状态更改，从而使原始myInput 组件保持不变，而当前SearchComponent 保持不变。

function App() {
  console.log("rendered App again"); //would never print a 2nd time.
  const SearchComponent = () => {
    const [citySearch, updateCitySearch] = useState("");
    console.log("rendered Search"); //would print with new state change
    const searchCityClick = () => {
      alert(citySearch);
    };
    return (
      <div>
        <input
          value={citySearch}
          onChange={e => {
            updateCitySearch(e.target.value);
          }}
        />
        <button onClick={searchCityClick}>Search</button>
      </div>
    );
  };
  return (
    <div>
      <div>
        <SearchComponent />
      </div>
    </div>
  );
}