Не распознавать объект события при отправке формы с помощью переключателей

Я пишу компонент реакции, который содержит форму с переключателями внутри нее. Я пытался создать функции onChange() и handleSubmit(), которые будут собирать значение выбранной кнопки и регистрировать ее значение в консоли, но объект события не распознается, и я получаю эту ошибку:

Uncaught TypeError: не удается прочитать свойство «цель» неопределенного

Почему это происходит и что я могу сделать с этим сейчас?

Вот мой код:

class NoteInput extends React.Component {
    constructor(props) {
        super(props);

        this.state={
            selectedValue: ''
        }

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        this.setState({selectedValue: e.target.value})
    }

    handleSubmit(e) {
        e.preventDefault();
        console.log(this.state.selectedValue);
    }

    render() {
        return (
            <div>
                <form onChange={this.handleChange()} >
                    <input type="radio" id="0" name="location" value={this.props.locations[0]} />
                    <label htmlFor="choice1">Safa Park</label>

                    <input type="radio" id="1" name="location" value={this.props.locations[1]} />
                    <label htmlFor="choice2">Mercato</label>

                    <input type="radio" id="2" name="location" value={this.props.locations[2]} />
                    <label htmlFor="choice3">Burj Khalifa</label>
                </form>
                <input onSubmit={this.handleSubmit()} type="submit" value="Submit" />
            </div>
        );
    }
}

person user74843    schedule 09.12.2017    source источник


Ответы (1)


Вы вызываете функции вместо того, чтобы передавать их обработчику событий. Вместо этого передайте функцию, удалив () вот так

onChange={this.handleChange}
onSubmit={this.handleSubmit} 
person Prakash Sharma    schedule 09.12.2017