Question

我正在写一个包含表单的反应组件，里面有单选按钮。我试图创建onChange（）和handleSubmit（）函数来收集所选按钮的值，控制台记录它的值，但是事件对象没有被识别，我得到了这个错误：

未捕获的TypeError：无法读取属性＆＃39; target＆＃39;未定义的

为什么会发生这种情况，我现在能做些什么呢？

这是我的代码：

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>
        );
    }
}

Answer 1

您正在调用函数而不是将它们传递给事件处理程序。因此，通过删除()这样的

来传递函数

onChange={this.handleChange}
onSubmit={this.handleSubmit}

在提交带有单选按钮的表单时无法识别事件对象

1 个答案: