javascript - 如何使用 JavaScript 选择选项？

Question

我在 JavaScript 中选择时遇到问题。我想更改选择的选项。该选项正在更改，但文本是默认的。这是为什么？我可以在我的代码中更改什么？我需要超时，因为脚本加载缓慢。

   setTimeout(() => {
        if(this.props.Locale === "en-EN") {
            let country = document.getElementById("Country");
            country.getElementsByTagName("option")[10].selected = "selected";
        }
    }, 3000);

Answer 1

您可以使用 select 组件的 value 属性来控制所选选项。您可以将它绑定(bind)到状态中的项目，然后将其设置为您需要的任何内容。我在下面给出了一个示例，它不是特别好的代码，但演示了它是如何工作的:

class App extends React.Component {
  state = {
    selectedOption: 2,
  }
  
  updateSelectedOption(newValue) {
    this.setState({
      selectedOption: newValue
    });
  }

  render() {
    return (
    <div>
        <select
          onChange={({ target }) => { this.updateSelectedOption(target.value) }}
          value={this.state.selectedOption}
        >
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
        <button onClick={() => this.updateSelectedOption(1)}>1</button>
        <button onClick={() => this.updateSelectedOption(5)}>5</button>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>