обработка опций выбора в React Hooks - PullRequest
Новая
       31

обработка опций выбора в React Hooks

0 голосов
/ 26 сентября 2019

Я пытаюсь получить текстовое значение из выпадающего списка, используя [useState} в React Hooks.Я просто получаю значение (число), а не текст.Я скопировал биты кода ниже, которые управляют выпадающим списком.Что мне здесь не хватает?Спасибо. 

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>

Ответы [ 2 ]

2 голосов
/ 26 сентября 2019

Если вы хотите текст, то получите доступ к тексту вместо значения.event.target.text.Проверьте ссылку здесь.http://output.jsbin.com/vumune/4/

0 голосов
/ 26 сентября 2019 
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
...