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