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

Question

我有标签组件。在里面，我正在使用具有输入字段的 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

标签： reactjsreact-hooks

Answer 1

将输入类型更改为“文本”并添加一个值道具。

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