Реакция: OnChange для выпадающего списка возвращает мне весь тег <select></select>

Question

Я работаю с реагировать, и у меня есть выпадающее меню, которое генерируется так:

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 (который отображает мне тег выбора выше):

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

Я потерян из-за того, что мне не хватает. У меня что-то похожее, и оно работает отлично.

Answer 1

Вы можете сделать что-то вроде этого .. Это обеспечивает гибкость, поэтому вы можете использовать этот компонент <select> где угодно, используя любой объект с любым свойством .. (используя ответ @CarlosQuerioz, вам всегда придется использовать объект склавиша name)

Значения параметров:

• data : массив, который вы хотите использовать в качестве параметров для выбора
• значение : ключ из вашего свойства данных, который вы хотите отобразить
• заполнитель : значение заполнителя (не выбирается)
• 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 (
    
      
        {placeholder}
      
           
        
          {itm[value]}
        
      
    
  );
}

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 (
    
      
      {user && {JSON.stringify(user, null, 2)}

} );} render (, 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>

Answer 2

Требуется ключ / значение при выбранном значении, но, к сожалению, он не работает.Возможно, вам потребуется использовать другой компонент, например 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 interface принимает в качестве значения только DOMString.Вы можете увидеть документы здесь