OnChange 事件使用 React JS 进行下拉答案

【问题标题】：OnChange event using React JS for drop downOnChange 事件使用 React JS 进行下拉
【发布时间】：2015-05-06 05:52:50
【问题描述】：

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 事件不起作用。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

更改事件是在 <select> 元素上触发的，而不是在 <option> 元素上触发的。然而，这不是唯一的问题。您定义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> 元素的内容，那么只需将其放入其中，就像您对任何静态内容所做的那样。

了解有关事件处理、状态和表单控件的更多信息：

【讨论】：

如果value 不与内部文本相同，我如何获取内部文本？
@ZeroDarkThirty：通常：event.target.textContent
@FelixKling 当我使用 textContent 时，它会打印 de Select 标签内的所有选项。我该怎么做才能只获得选定的？
@Juan：试试event.target.slectedOptions[0].label。
@FelixKin：在 onChange 函数中使用 event.persist() 作为目标，如果不使用，则为 null。

【解决方案2】：

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

【讨论】：

非常好。你可以通过这种方式看到改变的结果

{this.state.value}

【解决方案3】：

谢谢 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);

【讨论】：

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

【解决方案4】：

React Hooks (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>
  );
};

【讨论】：

【解决方案5】：

如果您使用 select 作为内联到其他组件，那么您也可以使用如下所示。

<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);
}

【讨论】：

【解决方案6】：

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>

【讨论】：

【解决方案7】：

  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>
  );
};

【讨论】：

【解决方案8】：

我将在此处添加此内容，以防它对某人有所帮助，因为这是对我有帮助的解决方案。

这是为了获取 SELECTED INDEX。不是为了价值。（为我工作，因为我的选项列表是一个数字列表）

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

【讨论】：