函数中的输入标记有问题-react js

8ehkhllq 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(267)

所以我试图有条件地呈现一个输入标记，这就是为什么我使用一个函数，而不是把它全部放在一个return语句中。我遇到的问题是，每当我在输入标记中键入一个单词时，它就会失去焦点，我必须再次单击它以重新获得焦点。我的代码如下：

function App() {
    function InputTag() {
        if (someCondition) {
            return (
                <input onChange={(e) => setState(e.target.value)} value={State} />
            )
        } else {
            return (
                <input disabled value={State} />
            )
        }
    }
    return (
        <div>
            <InputTag />
        </div>
    )
}

经过一些调试之后，我发现当我使用一个函数返回一个输入标记时会出现这个问题，但在我的例子中，我必须使用一个函数返回输入标记。
您可以在以下位置遇到此问题：https://codesandbox.io/s/xenodochial-bassi-3gmyk

JavaScript reactjs

来源：https://stackoverflow.com/questions/68327469/problem-with-an-input-tag-in-a-function-react-js

1条答案

按热度按时间

m1m5dgzv1#

InputTag 每次都被重新定义 App 渲染。及 App 每次 onChange 事件被激发，因为其状态正在更新。
一个解决办法是搬家 InputTag 外 App ，将状态和状态设置器作为组件道具传递。

import { useState } from "react";

export default function App() {
  const [State, setState] = useState("");

  return (
    <div className="App">
      <InputTag State={State} setState={setState} />
    </div>
  );
}

function InputTag({ State, setState }) {
  return <input onChange={(e) => setState(e.target.value)} value={State} />;
}

但是，您为什么说需要使用函数来执行一些条件渲染，这还不清楚。
如果您仅根据设置禁用输入 someCondition ，您可以轻松地在 App 的返回语句。

import { useState } from "react";

export default function App() {
  const [state, setState] = useState("");
  const [someCondition, setSomeCondition] = useState(true);

  return (
    <div className="App">
      <input
        onChange={(e) => setState(e.target.value)}
        value={state}
        disabled={!someCondition}
      />

      <button onClick={() => setSomeCondition(!someCondition)}>
        someCondition: {someCondition.toString()}
      </button>
    </div>
  );
}

赞(0）回复(0）举报 2021-09-23

我来回答

函数中的输入标记有问题-react js

1条答案

相关问题

热门标签

最新问答