移动到另一个选项卡后更改输入值反应 js 挂钩答案

【问题标题】：Input value is changed after moving to another tab react js hooks移动到另一个选项卡后更改输入值反应 js 挂钩
【发布时间】：2021-05-22 08:51:18
【问题描述】：

我有标签组件。在里面，我正在使用具有输入字段的 Tab 组件。当我移至另一个选项卡时，输入字段值会更改。我在下面附上了截图..Tab1

我在名称输入字段中输入了“xxx”。
Tab2 然后我移到了第二个标签。现在用户名输入字段显示'xxx'第一个选项卡的名称输入字段值。

我的代码是：

const [name, setName] = useState('');
const [GSTIN, setGSTIN] = useState('');
const [address, setAddress] = useState('');
const [city, setCity] = useState('');
const [postalCode, setPostalCode] = useState('');
const [country, setCountry] = useState('');
const [phone, setPhone] = useState('');
const [userName, setUserName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
 <Tabs>
      <Tab label={'Company Details'} tabName={'CompanyDetails'}>
        <div className="form">
          <div>
            <label htmlFor="name">Name</label>
            <input
              type="text"
              id="name"
              placeholder="Enter name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="gstin">GSTIN</label>
            <input
              type="text"
              id="gstin"
              placeholder="Enter GSTIN"
              value={GSTIN}
              onChange={(e) => setGSTIN(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="address">Address</label>
            <input
              type="text"
              id="address"
              placeholder="Enter Address"
              value={address}
              onChange={(e) => setAddress(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="city">City</label>
            <input
              type="text"
              id="city"
              placeholder="Enter City"
              value={city}
              onChange={(e) => setCity(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="postalCode">Postal Code</label>
            <input
              type="number"
              id="postalCode"
              placeholder="Enter Postal Code"
              value={postalCode}
              onChange={(e) => setPostalCode(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="country">Country</label>
            <input
              type="text"
              id="country"
              placeholder="Enter Country"
              value={country}
              onChange={(e) => setCountry(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="phone">Phone</label>
            <input
              type="text"
              id="phone"
              placeholder="Enter Phone Number"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              required
            />
          </div>
        </div>
      </Tab>
      <Tab label={'Admin Details'} tabName={'AdminDetails'}>
        <div className="form">
          <div>
            <label htmlFor="userName">User Name</label>
            <input
              type="userName"
              id="userName"
              placeholder="Enter User Name"
              required
              onChange={(e) => setUserName(e.target.value)}
            />
          </div>
          <div>
            <label htmlFor="email">Email Address</label>
            <input
              type="email"
              id="email"
              placeholder="Enter email"
              required
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div>
            <label htmlFor="passowrd">Password</label>
            <input
              type="password"
              id="password"
              placeholder="Enter password"
              required
              onChange={(e) => setPassword(e.target.value)}
            />
          </div>
          <div>
            <label htmlFor="confirmPassword">Confirm Password</label>
            <input
              type="password"
              id="confirmPassword"
              placeholder="Enter confirm password"
              required
              onChange={(e) => setConfirmPassword(e.target.value)}
            />
          </div>
        </div>
      </Tab>
  </Tabs>

请帮帮我... 更新后： Tab1 Tab2

【问题讨论】：

您还没有在第二个标签上将value 属性传递给您的inputs，您是否尝试过这样做？

标签： reactjs react-hooks

【解决方案1】：

将输入类型更改为“文本”并添加一个 value 属性。

    <label htmlFor="userName">User Name</label>
    <input
       type="userName"
       id="userName"
       value={userName}
       placeholder="Enter User Name"
       required
       onChange={(e) => setUserName(e.target.value)}
      />

【讨论】：

对不起。它是错误的。我改变了那个。但还是那样表现。我也上传了这些图片。
您能否也展示您的进口商品。这将帮助我们了解您正在使用的依赖项。特别是对于标签。是material-ui吗？
我添加了价值道具，然后它就可以工作了。谢谢。

【解决方案2】：

<input
    type="text"
    id="userName"
    value={userName}
    placeholder="Enter User Name"
    required
    onChange={(e) => setUserName(e.target.value)}
/>

您没有为 userName 字段提供值，输入类型也应该是文本。试试吧。

【讨论】：