处理 React Hooks 中的选择选项

Question

我正在尝试使用 React Hooks 中的 {useState} 从下拉选择中获取文本值。我只得到值（数字）而不是文本。我已经复制了下面控制选择下拉菜单的代码。我在这里想念什么？

 const [addrtype, setAddrType] = useState('Home')

function handleAddrTypeChange(e) {
  setAddrType(e.target.value);
  console.log(addrtype)
}

<select
  defaultValue={addrtype}
  onChange={handleAddrTypeChange}
  className="browser-default custom-select">

  <option selected value="1">Home</option>
  <option value="2">Marketing</option>
  <option value="3">Work</option>
  <option value="3">Head Office</option>

</select>

原文由 Steven Collins 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

import React, { useState, Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

const App = () => {

  const [addrtype, setAddrtype] = useState(["Work", "Home", "school"])
  const Add = addrtype.map(Add => Add
  )
  const handleAddrTypeChange = (e) => console.log((addrtype[e.target.value]))

  return (
    < select
      onChange={e => handleAddrTypeChange(e)}
      className="browser-default custom-select" >
      {
        Add.map((address, key) => <option value={key}>{address}</option>)
      }
    </select >)

}

render(<App />, document.getElementById('root'));

Working example

 https://stackblitz.com/edit/react-select-hook

原文由 Ashif Zafar 发布，翻译遵循 CC BY-SA 4.0 许可协议