使用 React JS 进行下拉的 OnChange 事件 [英] OnChange event using React JS for drop down

问题描述

var MySelect = React.createClass({改变:函数(){返回 document.querySelector('#lang').value;},渲染:函数(){返回(<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></选择><p></p><p值={this.change}></p>

);}});React.render(, document.body);

onChange 事件不起作用.

解决方案

change 事件在 元素上触发，而不是 元素.然而，这并不是唯一的问题.您定义 change 函数的方式不会导致组件的重新渲染.看起来你可能还没有完全掌握 React 的概念，所以也许 "Thinking in React" 有帮助.

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

var MySelect = React.createClass({getInitialState:函数(){返回 {值:'选择'}},更改:函数(事件){this.setState({value: event.target.value});},渲染:函数(){返回(<div><select id="lang" onChange={this.change} value={this.state.value}><option value="select">选择</option><option value="Java">Java</option><option value="C++">C++</option></选择><p></p><p>{this.state.value}</p>
);}});React.render(, document.body);

还要注意

元素没有 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

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

The onChange event does not work.

解决方案

The change event is triggered on the <select> element, not the <option> element. However, that's not the only problem. The way you defined the change function won't cause a rerender of the component. It seems like you might not have fully grasped the concept of React yet, so maybe "Thinking in React" helps.

You have to store the selected value as state and update the state when the value changes. Updating the state will trigger a rerender of the component.

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

Also note that <p> elements don't have a value attribute. React/JSX simply replicates the well-known HTML syntax, it doesn't introduce custom attributes (with the exception of key and ref). If you want the selected value to be the content of the <p> element then simply put inside of it, like you would do with any static content.

Learn more about event handling, state and form controls:

• http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
• http://facebook.github.io/react/docs/forms.html

这篇关于使用 React JS 进行下拉的 OnChange 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆