使用React JS为下拉菜单编写OnChange事件

Question

var MySelect = React.createClass({
     change: function(){
         return document.querySelector('#lang').value;
     },
     render: function(){
        return(
           <div>
               <select id="lang">
                  <option value="select" onChange={this.change}>Select</option>
                  <option value="Java" onChange={this.change}>Java</option>
                  <option value="C++" onChange={this.change}>C++</option>
               </select>
               <p></p>
               <p value={this.change}></p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

onChange事件不起作用。

- user544079

Answer 1

change事件是在元素上触发，而不是元素。然而，这并不是唯一的问题。你定义的change函数的方式不会导致组件重新渲染。看起来你可能还没有完全掌握React的概念，所以也许"Thinking in React"有所帮助。 你必须将选择的值存储为状态，并在值改变时更新状态。更新状态将触发组件的重新渲染。 var MySelect = React.createClass({ getInitialState: function() { return { value: 'select' } }, change: function(event){ this.setState({value: event.target.value}); }, render: function(){ return( <div> <select id="lang" onChange={this.change} value={this.state.value}> <option value="select">Select</option> <option value="Java">Java</option> <option value="C++">C++</option> </select> <p></p> <p>{this.state.value}</p> </div> ); } }); React.render(<MySelect />, document.body); 请注意，<p>元素没有value属性。React / JSX只是复制了众所周知的HTML语法，它不会引入自定义属性（除了key和ref）。如果您希望所选值成为<p>元素的内容，则只需将其放在其中，就像处理任何静态内容一样。了解更多有关事件处理，状态和表单控件的信息： http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html http://facebook.github.io/react/docs/forms.html

- Felix Kling

---

如何获取内部文本，而 value 不同于内部文本？ - blankface

@ZeroDarkThirty：常规操作：event.target.textContent。 - Felix Kling

@FelixKling 当我使用textContent时，它会打印选择标记内的所有选项。我应该怎么做才能只获取所选内容？ - Juan

@Juan：尝试使用 event.target.selectedOptions[0].label。 - Felix Kling

@FelixKin：在onChange函数中使用event.persist()，否则目标将为空。 - Amrutha VS

Answer 2

React钩子（16.8+）：

const Dropdown = ({
  options
}) => {
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => setSelectedOption(e.target.value)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};

- ahota

Answer 3

import React, { PureComponent, Fragment } from 'react';
import ReactDOM from 'react-dom';

class Select extends PureComponent {
  state = {
    options: [
      {
        name: 'Select…',
        value: null,
      },
      {
        name: 'A',
        value: 'a',
      },
      {
        name: 'B',
        value: 'b',
      },
      {
        name: 'C',
        value: 'c',
      },
    ],
    value: '?',
  };

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

  render() {
    const { options, value } = this.state;

    return (
      <Fragment>
        <select onChange={this.handleChange} value={value}>
          {options.map(item => (
            <option key={item.value} value={item.value}>
              {item.name}
            </option>
          ))}
        </select>
        <h1>Favorite letter: {value}</h1>
      </Fragment>
    );
  }
}

ReactDOM.render(<Select />, window.document.body);

- Kirk Strobeck

---

非常好。您可以通过以下方式查看更改的结果：<div> <p>{this.state.value}</p> </div> - Mohammad Farahani

Answer 4

  handleChange(value, selectOptionSetter) => {
     selectOptionSetter(value)
     // handle other stuff like persisting to store etc
   }

  const Dropdown = (props) => {
  const { options } = props;
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => handleChange(e.target.value, setSelectedOption)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};

- Pharis Kahama

Answer 5

如果有人需要帮助，我在这里补充一下我的解决方案。

这是获取所选索引，而不是值。 （对我有效，因为我的选项列表是数字列表）

const [selectedOption, setSelectedOption] = useState(0)
<select onChange={event => setSelectedOption(event.target.options.selectedIndex)}>

- PWJ

Answer 6

如果您正在将选择器作为其他组件的内联使用，则可以按照以下方式使用。

<select onChange={(val) => this.handlePeriodChange(val.target.value)} className="btn btn-sm btn-outline-secondary dropdown-toggle">
    <option value="TODAY">Today</option>
    <option value="THIS_WEEK" >This Week</option>
    <option value="THIS_MONTH">This Month</option>
    <option value="THIS_YEAR">This Year</option>
    <option selected value="LAST_AVAILABLE_DAY">Last Availabe NAV Day</option>
</select>

在使用select组件的组件上，像下面这样定义处理onChange事件的函数：

handlePeriodChange(selVal) {
    this.props.handlePeriodChange(selVal);
}

- Satish

Answer 7

现在你可以像这样使用它

import { useState } from 'react';
import './App.css';

function App() {
  const [selectedItem, setSelectedItem] = useState("Counter")
  const handleChange = (e) => {
    setSelectedItem(e.target.value)
  }
  return (
    <div className="App">
      <p>You have selected {selectedItem}</p>
      <select name='item-selected' value={selectedItem} onChange={handleChange}>
        <option value="Counter">Counter</option>
        <option value="useEffect">useEffect</option>
      </select>
    </div>
  );
}

export default App;

- Krishnadas PC

Answer 8

谢谢Felix Kling，但他的答案需要做一些修改：

var MySelect = React.createClass({
 getInitialState: function() {
     return {
         value: 'select'
     }
 },
 change: function(event){
     this.setState({value: event.target.value});
 },
 render: function(){
    return(
       <div>
           <select id="lang" onChange={this.change.bind(this)} value={this.state.value}>
              <option value="select">Select</option>
              <option value="Java">Java</option>
              <option value="C++">C++</option>
           </select>
           <p></p>
           <p>{this.state.value}</p>
       </div>
    );
 }
});
React.render(<MySelect />, document.body); 

- Abolfazl Miadian

---

你为什么要在 onChange 中添加 this.change.bind？ - Junior Usca

Answer 9

var MySelect = React.createClass({
getInitialState: function() {
 

var MySelect = React.createClass({
 getInitialState: function() {
     return {
         value: 'select'
     }
 },
 change: function(event){
     event.persist(); //THE MAIN LINE THAT WILL SET THE VALUE
     this.setState({value: event.target.value});
 },
 render: function(){
    return(
       <div>
           <select id="lang" onChange={this.change.bind(this)} value={this.state.value}>
              <option value="select">Select</option>
              <option value="Java">Java</option>
              <option value="C++">C++</option>
           </select>
           <p></p>
           <p>{this.state.value}</p>
       </div>
    );
 }
});
React.render(<MySelect />, document.body); 

<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>

- Sourav Purkait