reactjs - 能有多个值？使用反应钩子

Question

我想知道我的选项在反应中是否可以有多个值。

谁能帮助我如何为我的选择增加新的价值？如您所见，“value2”不是正确的方法。

    const handleSelect = e => {
    const { target } = e;
    setAccount(target.value);
    setAccId(target.value2);
  };
  console.log("account", account);
  return (
    <Card width bold>
      New Transaction
      <select
        value={account}
        onChange={e => handleSelect(e)}
        className="transaction__select"
      >
        <option>Choose acc</option>
        {usersAccounts &&
          usersAccounts.map(acc => (
            <option value={acc.accountNumber} value2={acc.id} key={acc.id}>
              {acc.accountNumber}
            </option>
          ))}

我找到了 JSON 的解决方案，以及解决这个问题的其他方法，但我不知道如何在反应中为我的代码创造更多价值。

标签： reactjsselectreact-hooksoption

Answer 1

如果您有权访问userAccounts，请将option值设置index为数组中帐户的 。然后调用setAccount并setAccId使用传递的索引。否则，您可以使用data属性。见https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html

用于index访问数组

const handleSelect = e => {
    const { target } = e;

    setAccount(userAccounts[target.value].accountNumber);
    setAccId(userAccounts[target.value].id);
  };
  console.log("account", account);
  return (
    <Card width bold>
      New Transaction
      <select
        value={account}
        onChange={e => handleSelect(e)}
        className="transaction__select"
      >
        <option>Choose acc</option>
        {usersAccounts &&
          usersAccounts.map((acc, idx) => (
            <option value={idx} key={acc.id}>
              {acc.accountNumber}
            </option>
          ))}

使用dataset

const handleSelect = e => {
    const { target } = e;
    setAccount(target.value);
    setAccId(target.dataset.accountid);
  };
  console.log("account", account);
  return (
    <Card width bold>
      New Transaction
      <select
        value={account}
        onChange={e => handleSelect(e)}
        className="transaction__select"
      >
        <option>Choose acc</option>
        {usersAccounts &&
          usersAccounts.map(acc => (
            <option value={acc.accountNumber} data-accountid={acc.id} key={acc.id}>
              {acc.accountNumber}
            </option>
          ))}