时间戳

首页 > 解决方案 > 条件渲染输入重叠文本

javascript - 条件渲染输入重叠文本

问题描述

我一直在尝试制作一个表单，根据切换按钮，呈现一个或两个不同的输入。我的代码如下所示：

const Test = () => {

const [switchButton, setSwitch] = React.useState(true)

const handleSwitch = () => {setstate(!switchButton)}

return <>
  <Switch checked={switchButton} onClick={() => handleSwitch} />
  {!switchButton ? 
    <>
       <label htmlFor="input_1">Input 1</label>
       <input id="input_1"/>
    </>
     :
    <>
       <label htmlFor="input_2">Input 2</label>
       <input id="input_2" />
       <label htmlFor="input_3">Input 3</label>
       <input id="input_3" />
    </>
  }
</>
}

export default Test;

当我在一个输入中输入字符然后切换它们时会出现我的问题：相同的字符显示在我的新渲染输入中。这里的例子。

为什么会这样？我真的迷路了

标签： javascriptreactjs

解决方案

使用元素的键，因此它不会被识别为相同的元素，因为如果之前已经渲染过，react 会尝试在每次重新渲染上映射元素。所以反应看到：1 个输入和 2 个输入，并认为第一个输入与以前相同。

const Test = () => {
  const [switchButton, setSwitch] = React.useState(true)
  const handleSwitch = () => setSwitch((switch) => !switch)

  return (
    <>
      <Switch checked={switch} onClick={handleSwitch} />
      {!switchButton ? (
        <React.Fragment key="key1">
          <label htmlFor="input_1">Input 1</label>
          <input id="input_1"/>
        </>
      ) : (
        <React.Fragment key="key2">
          <label htmlFor="input_2">Input 2</label>
          <input id="input_2" />
          <label htmlFor="input_3">Input 3</label>
          <input id="input_3" />
        </>
      )}
   </>
)}

export default Test;

但无论如何，使用受控输入会更好。像这样的东西：

const [value, setValue] = React.useState(true)

<input value={value} onChange={(e) => setValue(e.target.value)}/>

推荐阅读