Question

我正在第一个打字稿反应项目上工作，所以我是一个初学者，尝试遍历循环。我有一个带有3个不同选择字段的表单。现在，我要尝试的是提交表单以显示您选择的值时的操作。

在下面的代码中，如果我要更改选择选项，请说从“是”到“否”，在我的控制台handleChange中，该事件将显示为空。另外，当我为更改了选择值的任何字段提交表单时，它将在警报中显示为未定义。

我确实注意到，只要在下拉菜单中选择一个值，控制台就会重新加载。因此，我不确定这是否是导致它显示空值的原因。

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

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


}

Answer 1

您只需要访问value上的event.target属性，而不是grade，location或tenure，因为它们不存在。

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

我还建议在对该变量使用setState之前，将该事件值分配给一个变量。 this.setState是异步发生的，因此在触发时，通常会释放合成event，这可能会引起问题。您可以将value分配给另一个值（我的建议），也可以调用event.persist()保留事件，直到不再需要它为止，尽管这带有它自己的警告。在此处阅读更多内容：https://reactjs.org/docs/events.html#event-pooling

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

下面是一个代码沙箱链接，演示了所做的更改：

Code Sandbox Link

（已为该代码沙箱删除了Typescript，但重要的部分易于移植）

打字稿React handleChange（）或handleSubmit（）表单不起作用

1 个答案: