Question

我正在尝试获取如下所示的下拉菜单的值：

<ul className="tabs" data-component={true}>
    <li>
      <section className="sort-list" data-component={true}>
         <select value={0} className="sort" data-element={true}>
           <option key="0" value="0">Any Topic</option>
           <option key="1" value="1">Art</option>
           <option key="2" value="2">Auto</option>
      //...and so on

我也遇到过类似的问题，但是尝试alert(sort).value不能正常工作（以及其他一些变体），所以我认为我需要将选择器组合在一起？

我可以使用值或文本，因为目标是即使用户返回上一页也保持应用过滤器。

如何获取选项的键，值或文本？

Answer 1

您需要将onchage事件添加到您的选择中。

change = (event) => {
  this.setState({
    topic: event.target.value
  })
}

<select onChange={this.change} value={0} className="sort" data-element={true}
  <option key="0" value="0">Any Topic</option>
  <option key="1" value="1">Art</option>
  <option key="2" value="3">Auto</option>
</select>

演示

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">


class App extends React.Component {
  constructor() {
    super();
    this.state = {
      topic: ''
    };
  }

  change = (event) => {
    this.setState({
      topic: event.target.value
    })
  }

  render() {
    return (
      <div>
        
        <p>
          Selected topic: {this.state.topic}
        </p>
         <select onChange={this.change} className="sort" data-element={true}>
           <option key="0" value="0">Any Topic</option>
           <option key="1" value="1">Art</option>
           <option key="2" value="2">Auto</option>
           </select>
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>

Answer 2

Reactjs的方式是拥有一个带有onChange处理函数的选择框组件。像这样：

class MySelect extends React.Component {
    onChange = (val) => {
      // save the val somewhere..
      this.setState({currentVal: val})
    }
    render() {
        return <select onChange={this.onChange}> { getOptions() } </select>
    }
}

Answer 3

将onChange属性添加到元素。这是一个工作示例的简单代码段。

import React, { useState } from 'react';
import { oneOfType, string, number } from 'prop-types';

function MyDropdown({ selected: preSelected }) {
  const [selected, setSelected] = useState(preSelected);

  const onChange = evt => {
    setSelected(evt.target.value);
  }
  return (
    <div>
      <select onChange={onChange} value={selected}>
        <option value={1}>Opption 1</option>
        <option value={2}>Opption 2</option>
        <option value={3}>Opption 3</option>
      </select>
      {selected && <div>Selcted: {selected}</div>}
    </div>
  )
}

MyDropdown.propTypes = {
  selected: oneOfType([string,  number])
};

MyDropdown.defaultProps = 
  selected: 1
};

您也可以在CodeSandbox上对其进行实时检查：https://codesandbox.io/s/react-codesandbox-2voc6

如何在ReactJS中获得下拉菜单的值

3 个答案: