访问下拉列表的 DOM 元素答案

【问题标题】：Access the DOM element of a drop down访问下拉列表的 DOM 元素
【发布时间】：2019-08-13 00:48:40
【问题描述】：

我有一个下拉列表，我用它来允许用户在后端建立查询参数。

然后用户将单击一个按钮，我将访问用户在下拉列表中设置的值，以调用后端端点。

现在我在访问所选值时遇到了很多麻烦。这是我的下拉菜单：

<div className="wrappers">

<div className="timeFrameLabel label">Time Frame: </div>  
<select ref="timeFrame" className="timeFrameDropdown dropdown">
   <option>1m</option>
   <option>5m</option>
   <option>15m</option>
   <option>30m</option>
   <option>1h</option>
   <option>4h</option>
   <option>1d</option>
</select> 
</div>

按钮如下所示：

<Button className="goButton" onClick={this.getBacktestData}>
                Get Data
</Button>

最后的onClick方法如下：

getBacktestData = async() => {
        const { 
            symbol,
            binSize,
            startTime,
            endTime,
        } = this.state;
        var quantity = document.querySelector(".quantityDropdown select")[document.querySelector(".quantityDropdown select").selectedIndex].innerHTML;

        console.log(this.refs.asset.select)
        console.log(this.refs.timeFrame)
        console.log(this.refs.amount)


        return await fetch("http://localhost:3001/backtest/getdata", {
            method: 'POST',
            body: JSON.stringify({symbol:symbol, binSize: binSize, startTime:startTime, endTime:endTime}), // data can be `string` or {object}!
            headers:{
                'Content-Type': 'application/json'
            }
        })
        .then(res => res.json())
        .then(response => console.log(response))
        .catch(error => console.error('Error:', error))
    }

期望的结果是能够访问和 console.log() 选定的下拉元素。

欢迎任何帮助或提示。

【问题讨论】：

只是好奇，您是否有理由尝试访问下拉元素的内部 HTML 而不是使用它们的值？这是更惯用的方式：reactjs.org/docs/forms.html#the-select-tag
使用该值会更好:)。仍然不知道我将如何处理这种情况，有什么指示吗？ @尼克

标签： javascript reactjs dropdown

【解决方案1】：

这是访问select 值的惯用方式，而无需处理 DOM。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selected: null };
  }

  handleChange = e => {
    this.setState({ selected: e.target.value });
  };

  getBacktestData = async () => {
    const { selected } = this.state;
    // Do something with the selected value
  };

  render() {
    return (
      <React.Fragment>
        Selected: {this.state.selected}
        <select value={this.state.selected} onChange={this.handleChange}>
          <option value="1m">1m</option>
          <option value="5m">5m</option>
          <option value="15m">15m</option>
          <option value="30m">30m</option>
          <option value="1h">1h</option>
          <option value="4h">4h</option>
          <option vlaue="1d">1d</option>
        </select>
      </React.Fragment>
    );
  }
}

【讨论】：

【解决方案2】：

你可以通过首先声明一个构造函数来为状态赋值：

constructor(props) {
   super(props);
   this.state = {
      timeFrame: ""
   }
}

然后声明一个输入处理程序以将值分配给状态：

handleInputChange(event) {
   var value = event.target.value;
   var name = event.target.name;
   this.setState({
      [name]: value
   })
}

输入处理程序将使用输入字段上的名称属性来引用状态，因此输入上的名称属性应与您在状态中调用它的任何内容保持一致，这样您的选择就会更改为：

<select ref="timeFrame" name="timeFrame" className="timeFrameDropdown dropdown" onChange={this.handleInputChange.bind(this)} value={this.state.timeFrame}>
   <option value="1m">1m</option>
   <option value="5m">5m</option>
   <option value="15m">15m</option>
   <option value="30m">30m</option>
   <option value="1h">1h</option>
   <option value="4h">4h</option>
   <option value="1d">1d</option>
</select>

现在，当用户选择一个值时，它将被分配给状态，在您的提交函数中，您现在可以通过调用来访问它

   var timeFrame = this.state.timeFrame;
   console.log("Time Frame: ", timeFrame); //check to see your value

【讨论】：