Не удается прочитать входные данные из React Bootstrap Select - PullRequest
Новая
       14

Не удается прочитать входные данные из React Bootstrap Select

0 голосов
/ 03 ноября 2019

Я использую React Bosstrap Select и пишу код для доступа к значениям параметров из выбора. 

import React, {Component} from 'react';
import './App.css';
import {Form} from 'react-bootstrap';

class Race extends Component {

    constructor(props) {
        super(props);

        this.state = {
            race: 0
        };

        this.onSelectRace = this.onSelectRace.bind(this);
    }

    onSelectRace(e) {
        console.log(e);
        console.log(this.inputEl);
        this.setState({
            race: this.inputEl.value
        })
    }

    render() {
        return (
            <div>
                <h5>Race</h5>{this.state.race}
                <Form>
                    <Form.Group controlId="exampleForm.ControlSelect1">
                        <Form.Label>Select Race</Form.Label>
                        <Form.Control as="select"
                                      onChange={this.onSelectRace.bind(this)}
                                      inputRef={el => this.inputEl = el}>
                            <option value={1}>Human</option>
                            <option value={2}>Elfe</option>
                            <option value={3}>Nain</option>
                            <option value={4}>Halfling</option>
                            <option value={5}>Konizan</option>
                            <option value={6}>Neimada</option>
                        </Form.Control>
                    </Form.Group>
                </Form>
            </div>
        );
    }
}

export default Race;

Я пытаюсь получить входное значение select и распечатать его с помощью console.log Но мой кодне работает и в журнале консоли печатается как неопределенное. Пожалуйста, помогите мне получить эту работу.

1 Ответ

0 голосов
/ 03 ноября 2019

Значения этих опций выбора указаны в e.target.value.

Вот пример его работы - https://codesandbox.io/s/react-bootstrap-v6wtc

Также. Если вы хотите напечатать Человека и другие расы вместо 1, 2 и т. Д., То вы должны присвоить это значение своим вариантам вместо 1,2.

...