<option> 可以有多个值吗？使用反应钩子

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 的解决方案和其他解决方案，但我无法找到如何在 React 中为我的代码创造更多价值。

Answer 1

那不是 React 相关的东西，而是 html。 option 元素只能具有有效属性（例如值、禁用、标签和选定 - 如果我没记错的话，在反应中你使用 select 元素上的选定），val2 不是其中之一.

Answer 2

如果您有权访问 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>
          ))}

<option> 可以有多个值吗？使用反应钩子

Can <option> has more than one value? using React-hooks

reactjs

select

react-hooks

option