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>

Answer 1

如果要输入文本，请访问文本而不是值。 event.target.text。在此处检查参考。 http://output.jsbin.com/vumune/4/

Answer 2

只需更改选项值

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

Answer 3

const [name, setName] = useState("");

const [email, setEmail] = useState("");

const [addrtype, setAddrtype] = useState(["Normal", "Admin"])

const Add = addrtype.map(Add => Add)

const handleAddrTypeChange = (e) => { 
          console.clear(); 
          console.log((addrtype[e.target.value])); 
          setRole(addrtype[e.target.value]) 
            }

const [role, setRole] = useState('Normal')


 const handleSubmit = (event) => {
    event.preventDefault();
    console.log
     (`
      Name: ${name}
      Email: ${email} 
      Role: ${role}           
    `);

    };


    const UserForm = (
    <form onSubmit={handleSubmit}>
        <label htmlFor="name">Name</label>
        <input
            value={name}
            placeholder="Name"
            required
            onChange={(event) => setName(event.target.value)}
        ></input>

        <label htmlFor="email">Email</label>
        <input
            value={email}
            placeholder="Email"
            required
            onChange={(event) => setEmail(event.target.value)}
        ></input>

        <label for="role">Choose a Role:</label>
        < select
            onChange={e => handleAddrTypeChange(e)}
            className="browser-default custom-select" >
            {
                Add.map((address, key) => <option key={key} value={key}>{address} 
                   </option>)
            }
        </select >


        <div class="wrapper">
            <button type="submit" className="button">Create User</button>
        </div>
    </form >

Answer 4

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

处理React Hooks中的选择选项

4 个答案: