Javascript Typescript React handleChange（）或handleSubmit（）表单不工作

我正在做我的第一个TypeScriptReact项目，所以我是一个尝试遍历循环的初学者。我有一个包含3个不同选择字段的表单。现在我要做的是，当您提交表单以显示您选择的值时

使用下面的代码，如果我要更改一个选择选项，让我说从“是”到“否”，在我的控制台中，该

handleChange

事件将显示null。此外，当我为更改了选择值的任何字段提交表单时，它将在警报中显示undefined

我注意到每当我在下拉列表中选择一个值时，控制台就会重新加载。所以我不确定这是否是导致它显示空值的原因

我正在寻找存储用户所选内容的最佳方法：

import * as React from 'react';
import styles from './TeacherSelector.module.scss';
import { ITeacherSelectorProps } from './ITeacherSelectorProps';


export default class TeacherSelector extends React.Component<ITeacherSelectorProps, {tenure: string, grade: string, location: string}> {

    constructor(props) {
        super(props);
        this.state = {
            tenure: 'yes',
            grade: 'first',
            location: 'new-york',
        };

        this.handleChangeTenure = this.handleChangeTenure.bind(this);
        this.handleChangeGrade = this.handleChangeGrade.bind(this);
        this.handleChangeLocation = this.handleChangeLocation.bind(this);

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

    }

    handleChangeTenure(event) {
        console.log(event);
        this.setState({tenure: event.target.tenure});
    }

    handleChangeGrade(event) {
        console.log(event);
        this.setState({grade: event.target.grade});
    }

    handleChangeLocation(event) {
        this.setState({location: event.target.location});
    }

    handleSubmit(event) {
        event.preventDefault();
        alert('Tenure: ' + this.state.tenure + 'Grade: ' + this.state.grade + 'Location: ' + this.state.location);
    }


    public render(): React.ReactElement<ITeacherSelectorProps> {

        return (
            <div className={ styles.TeacherSelector }>
                <div className={ styles.container }>
                    <div className={ styles.row }>
                        <div className={ styles.column }>

                            <form onSubmit={this.handleSubmit}>
                                <label>
                                    Tenure (YES/NO):
                                    <select name="tenure" value={this.state.tenure} onChange={(Val: any) => this.handleChangeTenure(Val)}>
                                        <option value="yes">Yes</option>
                                        <option value="no">No</option>
                                    </select>
                                </label>

                                <label>
                                    Teaching Grade Level
                                    <select  name="grade" value={this.state.grade} onChange={this.handleChangeGrade}>
                                        <option value="first">first</option>
                                        <option value="second">second</option>
                                        <option value="third">third</option>
                                        <option value="fourth">fourth</option>                                        
                                    </select>
                                </label>

                                <label>
                                    Location
                                    <select name="location" value={this.state.location} onChange={this.handleChangeLocation}>
                                        <option value="new-york">New York</option>
                                        <option value="queens">Queens</option>
                                        <option value="new-jersey">New Jersey</option>
                                    </select>
                                </label>                                

                                <input type="submit" value="Submit" />
                            </form>                         

                        </div>
                    </div>
                </div>
            </div>
        );
      }


}

import*as React from'React'；
从“/TeacherSelector.module.scss”导入样式；
从“/ITeacherSelectorProps”导入{ITeacherSelectorProps}；
导出默认类TeacherSelector扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
任期：“是”，
年级：'第一'，
地点：'纽约'，
};
this.handlechangeering=this.handlechangeering.bind（this）；
this.handleChangeGrade=this.handleChangeGrade.bind（this）；
this.handleChangeLocation=this.handleChangeLocation.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
HandleChange（活动）{
console.log（事件）；
this.setState（{leverage:event.target.leverage}）；
}
手牌级别（赛事）{
console.log（事件）；
this.setState（{grade:event.target.grade}）；
}
handleChangeLocation（事件）{
this.setState（{location:event.target.location}）；
}
handleSubmit（事件）{
event.preventDefault（）；
警报（'任期：'+this.state.leverage+'等级：'+this.state.Grade+'位置：'+this.state.Location）；
}
public render（）：React.ReactElement{
返回(
任期（是/否）：
this.handleChangeLexture（Val）}>
对
不
教学年级
第一
第二
第三
第四
位置
纽约
皇后区
新泽西州
);
}
}

您只需要访问

事件.目标

上的

值

属性，而不是

等级

，

位置

或

任期

，因为它们不存在

handleChangeTenure(event) {
    console.log(event);
    this.setState({tenure: event.target.value}); // not .tenure
}
// repeat for other handle.. events

我还建议在对变量使用

setState

之前，将该事件值赋给变量

this.setState

是异步发生的，因此当它触发时，通常会释放合成

事件

，这可能会导致问题。您可以将

value

分配给另一个值（我的建议），也可以调用

event.persist（）

来保留事件，直到您不再需要它为止，尽管这有它自己的注意事项。 更多阅读：

下面是一个代码沙盒链接，演示了如何进行更改：

---

（这个代码沙盒中的Typescript已被剥离，但重要的部分很容易移植）

哇，非常感谢您的帮助！这起作用了。真不敢相信这个解决方案有多容易。谢谢你的解释

handleChangeTenure(event) {
    // temp variable first = no more chrome console complaining about synthetic events
    const { value } = event.target;
    this.setState({tenure: value });
}