javascript - 如何在 React 中创建下拉菜单？

Question

我正在尝试在 React 中创建一个简单的下拉列表，但我面临两个问题。我的代码是:

import React from "react";

class EditEmployee extends React.Component {

    constructor() {
        super();
        this.state={
            salary:''
        }
     }

    validateSalary=(e)=>{
       // e.persist();
        var val=e.target.value;
        this.setState((prevState)=>{prevState.salary=val})
    }


    render() {

        return (
            <form>
                <div className="form-group">
                    <label>Salary:</label>
                    <select onChange={this.validateSalary} className="form-control" value={this.state.salary}>
                        <option value="20000">20000</option>
                        <option value="30000">30000</option>
                        <option value="40000">40000</option>
                        <option value="50000">50000</option>
                    </select>

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

export default EditEmployee

问题 1 - 当我选择一个选项时，我能够在控制台中获取该值，但下拉列表未显示所选值。我正在正确设置状态，但我不确定为什么它不更新 View 。

问题 2 - 如果我直接访问 setState 内的事件，我会收到有关合成事件的警告，并且代码不起作用。为什么我需要 e.persist() 来避免它？

Answer 1

validateSalary(e){
       // e.persist();
        var val=e.target.value;
        this.setState({
           salary = val
        });
    }


<select onChange={e => this.validateSalary(e)} className="form-control" value={this.state.salary}>
                        <option value="20000">20000</option>
                        <option value="30000">30000</option>
                        <option value="40000">40000</option>
                        <option value="50000">50000</option>
                    </select>

或 你需要改变你的功能

validateSalary=(e)=> {
   var val = e.target.value;
   this.setState({
       salary = val
    });
}

你能试试这个代码吗？我认为这是一些回调的问题