如何在React中创建下拉列表？

Question

我试图在反应中创建一个简单的下拉，我面临两个问题。我的代码是：

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 - 当我选择一个选项时，我能够在控制台中获取该值，但下拉列表未显示所选值。我正在正确设置状态，我不确定为什么不更新视图。

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

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

Answer 2

试试这个改变

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

Answer 3

这将解决您的两个问题。

import React from "react";
class EditEmployee extends Component {
constructor(props) {
  super(props);
  this.state = {
    salary: ""
  };
}

validateSalary = e => {
  // e.persist();
  const { name, value } = e.target;
  this.setState({ [name]: value }, function() {
    console.log(this.state);
  });
};

render() {
  return (
    <form>
      <div className="form-group">
        <label>Salary:</label>
        <select
          name="salary"
          onChange={this.validateSalary}
          className="form-control"
          value={this.state.salary}
        >
          <option value="">Please select salary</option>
          <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;

在状态更新后我正在安慰状态，因为如果您在州外控制状态，您将获得以前的状态值。