OnChange 事件使用 React JS 进行下拉

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

687331 次浏览
小开
最佳答案

更改事件是在<select>元素上触发的，而不是<option>元素。然而，这并不是唯一的问题。定义change函数的方式不会导致组件的重新呈现。看起来你可能还没有完全掌握React的概念，所以“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 < a href = " http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html " > < / >
  • http://facebook.github.io/react/docs/forms.html < a href = " http://facebook.github.io/react/docs/forms.html " > < / >
小开 
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);
小开

谢谢菲利克斯·克林，但他的回答需要改变一下:

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

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

如果你使用select作为内联到其他组件，那么你也可以使用下面给出的like。

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

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

我把这个加在这里，也许能帮到别人因为这个方法帮过我。

这是为了获得SELECTED INDEX。不是为了价值。 (对我有用，因为我的选项列表是一个数字列表)

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

提交答案