OnChange 事件使用 React JS 进行下拉
Posted
技术标签:
【中文标题】OnChange 事件使用 React JS 进行下拉【英文标题】：OnChange event using React JS for drop down 【发布时间】：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 事件不起作用。
【问题讨论】：
【参考方案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> 元素的内容，那么只需将其放入其中，就像您对任何静态内容所做的那样。
了解有关事件处理、状态和表单控件的更多信息：
http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html http://facebook.github.io/react/docs/forms.html【讨论】：
如果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)>
【讨论】：
以上是关于OnChange 事件使用 React JS 进行下拉的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 CKEditor 和 React JS 捕获 OnChange 事件
超过最大更新深度。使用 TimePickerInput onChange 事件 React.js 时的无限循环
在React JS中按下输入时如何实现onChange事件[重复]