小编典典

OnChange 事件使用 React JS 进行下拉

all

var MySelect = React.createClass({
change: function(){
return document.querySelector(‘#lang’).value;
},
render: function(){
return(






);
}
});

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

onChange事件不起作用。


阅读 85

收藏
2022-05-29

共1个答案

小编典典

change
事件是在<select>元素上触发的,而不是在<option>元素上触发的。然而,这不是唯一的问题。您定义change函数的方式不会导致组件的重新呈现

您必须将所选值存储为状态并在值更改时更新状态。更新状态将触发组件的重新渲染。

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
语法,它没有引入自定义属性(keyand除外ref)。如果您希望所选值成为<p>元素的内容,那么只需将其放入其中,就像您对任何静态内容所做的那样。

2022-05-29