时间戳

首页 > 解决方案 > 反应选择元素值是将状态设置为先前选择的选项值吗？

javascript - 反应选择元素值是将状态设置为先前选择的选项值吗？

问题描述

在我在 React 中的 select 元素上，前几个选择不会更改值，但随后它们开始将值更改为先前选择的选项，例如如果我选择选项 FRITOS，则值未定义，然后当我选择选项 COFFEE，值是 FRITOS，然后当我再次选择 FRITOS 时，值变为 COFFEE。真的很困惑这是怎么回事哈哈。

我设置状态的功能

  changeGroup = (event) => {
    this.setState({ [event.target.name]: event.target.value });
    console.log(this.state.groupSelected);
    const bugQuery = {
      GroupID: this.state.groupSelected,
    };
    console.log(bugQuery);
    console.log(this.props.bugs);
    if (this.state.groupSelected !== undefined) {
      this.props.getBugs(bugQuery);
    }
  };

我的选择元素

     <select
                style={{ border: "1px solid white", fontSize: "2.7vh" }}
                name="groupSelected"
                value={this.state.groupSelected}
                onChange={this.changeGroup}
              >
                <option value="FRITOS">FRITOS</option>
                <option value="5AFSA">5AFSA</option>
                <option selected>Groups</option>
    </select>

标签： javascriptreactjsjsx

解决方案

[以前的答案很愚蠢，让我们编辑！]

您可以通过将您的选择放入组件中来触发重新渲染：

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

class App extends Component {
  constructor() {
    super();

    this.options = ["FRITOS", "SAFSA"];

    this.state = {
      name: "React",
      groupSelected:''
    };
  }

  changeGroup = event => {
    this.setState({[event.target.name]: event.target.value }, () => console.log(this.state.groupSelected));

  };

  render() {
    return (
      <div>
        <Hello name={this.state.name} />

        <MySelect 
          options={this.options} 
          selectedOption={this.state.groupSelected} 
          onSelectChange={this.changeGroup} />

        <div>groupSelected = {this.state.groupSelected}</div>
      </div>
    );
  }
}

class MySelect extends Component {
  constructor(props) {
    super(props);

    this.options = ["FRITOS", "SAFSA"];
  }

  buildSelectOptions = () => {
    return this.props.options.map(option => (
      <option key={option} value={option}>
        {option}
      </option>
    ));
  };

  render() {
    return (
      <>
        <select
          style={{ border: "1px solid white", fontSize: "2.7vh" }}
          name="groupSelected"
          value={this.props.groupSelected}
          onChange={this.props.onSelectChange}
        >
          {this.buildSelectOptions()}
          <option selected>Groups</option>
        </select>
      </>
    );
  }
}

render(<App />, document.getElementById("root"));

这是Stackblitz 的复制品

自从您使用 this.setState 以来，我一直使用旧方法，但是如果可以，请移至最新版本的 react 并使用功能组件和钩子，这将不再是问题。

推荐阅读