ReactJS - 基于输入值 - 自动设置选择选项

Question

我的目标是，当您在输入字段中输入：1 时，选择下拉菜单应将值设置为：First Value。反之亦然，当输入字段的值为 2。所以这应该发生在输入字段的 onKeyUp 事件上，根据这些输入字段值，选择下拉菜单应该自动选择到其适当的选择选项

handleKeyUp(e) {
  if (inputValue == 1) {
    this.setState({ mySelectOptions: e.target.value });
  }
}

render() {
  return (
    <div className="formID">
      <form>
        <div className="inputSection">
          <input
            name="myInput"
            onChange={e => this.setState({ myInput: e.target.value })}
            onKeyUP={this.handleKeyUp}
          />
        </div>
        <div className="selectOptions">
          <select
            value={this.state.value}
            onKeyUp={e => this.setState({ mySelectOptions: e.target.value })}
          >
            <option value="firstValue">First Value</option>
            <option value="secondValue">Second Value</option>
          </select>
        </div>
      </form>
    </div>
  );
}

Answer 1

我更新了您的代码，并且它按照您在描述中的说明工作，您的代码存在一些问题，例如 onKeyUP 应该是 onKeyUp，而不是在发生更改时调用 setState 函数，这样更好要使用handleKeyUp，我建议在编写代码时使用控制台/IDE 在开发过程中指导您，而不是想知道为什么事情没有按预期工作。

import React from "react";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: "firstValue"
    };
    this.handleKeyUp = this.handleKeyUp.bind(this);
  }

  handleKeyUp(value) {
    console.log(value);
    if (value === "1") {
      this.setState({ selectedOption: "firstValue" });
    } else {
      this.setState({ selectedOption: "secondValue" });
    }
  }

  render() {
    return (
      <div className="formID">
        <form>
          <div className="inputSection">
            <input
              name="myInput"
              defaultValue="1"
              onKeyUp={e => this.handleKeyUp(e.target.value)}
            />
          </div>
          <div className="selectOptions">
            <select
              value={this.state.selectedOption}
              onChange={e => this.setState({ selectedOption: e.target.value })}
            >
              <option value="firstValue">First Value</option>
              <option value="secondValue">Second Value</option>
            </select>
          </div>
        </form>
      </div>
    );
  }
}