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>

OR 您需要更改功能

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;

状态更新后，我会安慰状态，因为如果您在外部控制状态，则会得到以前的状态值。

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

3 个答案: