处理 React Hooks 中的选择选项

Posted 2023-02-22

【中文标题】处理 React Hooks 中的选择选项

【英文标题】：handling select options in React Hooks

【发布时间】：2020-01-26 14:49:28

【问题描述】：

我正在尝试使用 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>

【参考方案1】：

如果您想要文本，则访问文本而不是值。 event.target.text。 检查参考here。 http://output.jsbin.com/vumune/4/

【讨论】：

当我更改为 setAddrType(e.target.text); console.log(addrtype.text) 我得到 undefined and Uncaught TypeError: Cannot read property 'text' of undefined

检查了您的示例。现在正在处理这个。谢谢。函数 handleAddrTypeChange(e) var id = e.target.selectedIndex; setAddrType(e.target[id].text); console.log(addrtype)

为什么最初的选择是空白的，然后任何其他选择都在 console.log 后面？ @Srigar

【参考方案2】：

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

【讨论】：

谢谢，但我在示例中得到“未定义密钥”。

stackblitz.com/edit/react-select-hook - 请再看这里

【参考方案3】：

只需更改选项值

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

【讨论】：

OP 需要文本但不需要值。我相信他有充分的理由使用价值数字。您的建议没有解决问题。

【参考方案4】：

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 >