Question

我正在与react一起工作，并且有一个下拉菜单，如下所示：

Select a user : <select defaultValue={'DEFAULT'} onChange={this.handleFilter}><option value="DEFAULT" disabled>-- select an gangster --</option>{ddUsers}</select>

ddUsers：

let ddUsers = this.state.users.map(user => <option key={uuid.v4()} value={user}>{user.name}</option>)

这是我的用户数组：

users : [
    { name: 'All',    key : uuid.v4()}, 
    { name: 'Koko',   key : uuid.v4()},
    { name: 'Krikri', key : uuid.v4()},
    { name: 'Kéké',   key : uuid.v4()}
  ]

我的问题是，当我想使用event.target时，它会向我返回整个select标签（此处是console.log（event.target）的重要部分：

<select>
<option value="DEFAULT" disabled selected>-- select an gangster --</option>
<option value="[object Object]">All</option>
<option value="[object Object]">Koko</option> 
<option value="[object Object]">Krikri</option>
<option value="[object Object]">Kéké</option>
</select>

通常应该只返回给我用户的地方这是我的handleUser（在上面显示我的select标签）：

handleFilter = (event) => {
    console.log(event.target);
}

我迷失了我所想念的东西。我有类似的东西，并且工作正常。

Answer 1

您想要的是键值/选择值，但是不幸的是，它不起作用。也许您需要使用其他组件，例如React-select或使用JSON.stringfy（）和JSON.parse（）

我已经使用JSON方法制作了抽象代码。

const uuid = {
  v4() {
    return Math.random();
  }
};

const users = [
  { name: "All", key: uuid.v4() },
  { name: "Koko", key: uuid.v4() },
  { name: "Krikri", key: uuid.v4() },
  { name: "Kéké", key: uuid.v4() }
];

function App() {
  const [selected, setSelected] = React.useState("");

  function parseSelected(event) {
    const valueToParse = event.target.value;
    const itemSelected = JSON.parse(valueToParse);
    setSelected(itemSelected);
    return;
  }

  return (
    <div>
      <select name="any" id="any" onChange={parseSelected}>
        {users.map(user => (
          <option key={user.key} value={JSON.stringify(user)}>
            {user.name}
          </option>
        ))}
      </select>
      <p>Selected name: {selected.name}</p>
      <p>Selected key: {selected.key}</p>
    </div>
  );
}

原因是Option HTML接口仅接受DOMString作为值。您可以看到文档here

Answer 2

您可以执行以下操作。.这具有灵活性，因此您可以在任何位置使用此<select>组件，使用具有任何属性的任何对象。（使用@CarlosQuerioz答案，您始终必须使用使用name键的对象）

参数含义：

数据：要用作选择选项的数组
值：您要显示的数据属性中的键
占位符：占位符值（不可选择）
defaultOption ：默认选择的选项（有关此内容，请参见下文）
onSelectChange ：选择更改时触发的事件

我们如何处理defaultOption ：

如果将对象数组传递给defaultOption，我们将选择该数组中的第一个对象，并使用指定的value键来确定要显示的值
如果您传入一个对象，我们将显示指定的value键

为演示defaultOption，在下面的示例中取消注释每个值，您将明白我的意思。

    const users = [                 // If this was your `data` object
      { name: "Karkar", key: 1 },
      { name: "Koko", key: 2 },
      { name: "Krikri", key: 3 },
      { name: "Kéké", key: 4 }
    ];

      <MySelect
        data={users}
        value="name"                // Must be a valid key that your objects have
        onSelectChange={handle}
        defaultOption={users[0].name} 
        //defaultOption={users[1]}  // Would display 'Koko' by default
        //defaultOption={users}     // Would display 'Karkar' by default
      />

示例：

const { useState, useEffect } = React;
const { render } = ReactDOM;

function MySelect({ data, value, defaultOption = "", onSelectChange, placeholder = "Select an option" }) {
  const [selected, setSelected] = useState(defaultOption);
  
  const handleOnSelectChange = selection => {
    onSelectChange && onSelectChange(selection);
  }

  const handleChange = event => {
    let sel = data.find(d => d[value] === event.target.value);
    setSelected(sel);
    handleOnSelectChange(sel);
  };

  useEffect(() => {
    if (typeof selected === "object") {
      let val = selected.length > 0 ? selected[0] : selected;
      setSelected(val);
      handleOnSelectChange(val);
    }
  }, []);

  return (
    <select value={selected[value]} onChange={handleChange}>
      <option value="" disabled>
        {placeholder}
      </option>
      {data && data.map((itm, indx) => (
        <option key={indx} value={itm[value]}>
          {itm[value]}
        </option>
      ))}
    </select>
  );
}

const users = [
  { name: "Karkar", key: 1 },
  { name: "Koko", key: 2 },
  { name: "Krikri", key: 3 },
  { name: "Kéké", key: 4 }
];

function App() {
  const [user, setUser] = useState();

  const handle = selectedUser => {
    setUser(selectedUser);
  };
  
  return (
    <div>
      <MySelect
        data={users}
        value="name"
        placeholder="Please make a selection"
        onSelectChange={handle}
        //defaultOption={users[0].name}
        //defaultOption={users[0]}
        defaultOption={users}
      />
      {user && <pre>{JSON.stringify(user, null, 2)}</pre>}
    </div>
  );
}

render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>

反应：OnChange下拉菜单返回整个<select> </select>标签

2 个答案: