javascript - 无法更改 React 子组件中的下拉值

Question

我有两个组件:

应用程序组件:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedScale: "WholeTone"
    };
    this.handleScaleSelect = this.handleScaleSelect.bind(this);
  }

  handleScaleSelect = selectedScale => {
    console.log("ss: " + selectedScale);
    console.log(this.state);
    this.setState({ selectedScale: selectedScale });
    console.log("after ss:" + this.state.selectedScale);
  }

  render() {
    return (
        <Scales
          onSelectScale={this.handleScaleSelect}
          selected={this.state.selectedScale}
        ></Scales>
    )
  }
}

缩放组件:

class Scales extends Component {
  state = {
    options: []
  };
  constructor(props) {
    super(props);
    // this.getScales();
  }

  render() {
    return (
      <form onSubmit={() => this.props.onSelectScale(this.getSelectedScale())}>
        <select id="scaleSelectId"></select>
        <input type="submit" value="render scale" />
      </form>
    );
  }

  componentDidMount() {
    var xhr = new XMLHttpRequest();
    function addOptions() {
      var select = document.getElementById("scaleSelectId");
      JSON.parse(xhr.responseText).map(scale => {
        var option = document.createElement("option");
        option.text = scale;
        select.add(option);
      });
      select.value = this.props.selected;
    }
    xhr.open("GET", "http://127.0.0.1:5000/get_scales");
    xhr.onload = addOptions.bind(this);
    xhr.send();
  }
}

我想更改下拉值，按表单的提交按钮并将该值传递给父元素，以便进一步使用它。我想知道我做错了什么。我做了一些登录handleScaleSelect看看发生了什么，奇怪的是 - selectedScale变量等于提交的值，但组件的状态没有改变。

Answer 1

尝试以下代码。在 React 中，我们通常使用 {arr.map(v => <div>value</div>)} 向 DOM 添加值。 。所以我添加了这一点。

我还在 Scales.js 中创建了两个函数文件。 handleSelect()和submitForm() 。这些函数获取 <select /> 发出的事件和<form />分别属性。我将这些函数绑定(bind)在顶部的构造函数中。

最后，我搬家了componentDidMount()在 React.Component 内部。

注意:由于我无权访问您正在调用的 API，因此我必须创建自己的测试值数组，即 var optionsArr = [1,2,3,4,5]; .

App.js

import React from 'react';
import Scales from './Scales';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedScale: 'WholeTone'
    };
    this.handleScaleSelect = this.handleScaleSelect.bind(this);
  }

  handleScaleSelect = selectedScale => {
    this.setState({ selectedScale: selectedScale });
    this.postXML();
  };

  postXML() {
    // your XMLR code here
  }

  render() {
    return (
      <div>
        <h1>App.js Selected Scale: {this.state.selectedScale}</h1>
        <Scales onSelectScale={this.handleScaleSelect} selectedScale={this.state.selectedScale}></Scales>
      </div>
    );
  }
}

export default App;

Scales.js

import React from 'react';

class Scales extends React.Component {
  state = {
    options: [],
    selectedOption: 'default'
  };

  constructor(props) {
    super(props);
    this.handleSelect = this.handleSelect.bind(this);
    this.submitForm = this.submitForm.bind(this);
  }

  componentDidMount() {
    this.setState({ selectedOption: this.props.selectedScale });
    this.getScales();
  }

  getScales() {
    var xhr = new XMLHttpRequest();
    function addOptions() {
      var optionsArr = JSON.parse(xhr.responseText);
      this.setState({ options: optionsArr });
    }
    xhr.open('GET', 'http://127.0.0.1:5000/get_scales');
    xhr.onload = addOptions.bind(this);
    xhr.send();
  }

  handleSelect(event) {
    this.setState({ selectedOption: event.target.value });
  }

  submitForm(event) {
    if (event) {
      event.preventDefault(); // stops page from refreshing when click form button
    }
    this.props.onSelectScale(this.state.selectedOption);
  }

  render() {
    return (
      <form onSubmit={this.submitForm}>
        <h1>Scale.js Selected Scale: {this.state.selectedOption}</h1>
        <select id="scaleSelectId" value={this.selectedOption} onChange={this.handleSelect}>
          {this.state.options.map((value, index) => {
            return (
              <option key={index} value={value}>
                {value}
              </option>
            );
          })}
        </select>
        <input type="submit" value="render scale" />
      </form>
    );
  }
}

export default Scales;