使用React JS作为下拉列表的OnChange事件

作者 
var MySelect=React.createClass({
更改：函数（）{
返回document.querySelector（'#lang'）.value；
},
render:function（）{
返回(
&lt；div&gt；
&lt；选择id=“lang”&gt；
&lt；option value=“select”onChange={this.change}&gt；选择&lt；/option&gt；
&lt；option value=“Java”onChange={this.change}&gt；Java&lt；/option&gt；
&lt；option value=“C++”onChange={this.change}&gt；C++&lt；/option&gt；
&lt；/select&gt；
&lt；p&gt；lt；/p&gt；
&lt；p值={this.change}&gt；&lt；/p&gt；
&lt；/div&gt；
);
}
});
React.render（&lt；MySelect/&gt；，document.body）；

onChange事件不起作用

更改事件在上触发&lt；选择&gt元素，而不是&lt；选项&gt元素。然而，这不是唯一的问题。您定义change函数的方式不会导致组件的重新加载。看起来您可能还没有完全掌握React的概念，所以“在React中思考”可能会有所帮助

必须将选定值存储为状态，并在值更改时更新状态。更新状态将触发组件的重新加载

var MySelect=React.createClass({
getInitialState:函数（）{
返回{
值：“选择”
}
},
更改：功能（事件）{
this.setState（{value:event.target.value}）；
},
render:function（）{
返回(
&lt；div&gt；
&lt；select id=“lang”onChange={this.change}value={this.state.value}&gt；
&lt；option value=“select”&gt；选择&lt；/option&gt；
&lt；option value=“Java”&gt；Java&lt；/option&gt；
&lt；option value=“C++”&gt；C++&lt；/option&gt；
&lt；/select&gt；
&lt；p&gt；lt；/p&gt；
&lt；p&gt；{this.state.value}&lt；/p&gt；
&lt；/div&gt；
);
}
});
React.render（&lt；MySelect/&gt；，document.body）；

还要注意&lt；p&gt元素没有值属性。React/JSX只是复制了众所周知的HTML语法，它没有引入自定义属性（除了key和ref）。如果希望所选值成为的内容&lt；p&gt</元素，然后简单地放入其中，就像处理任何静态内容一样

了解有关事件处理、状态和窗体控件的详细信息：

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

相关文章：

  1. 使用React路由器以编程方式导航
  2. 您是否可以在不调用setState的情况下强制React组件重新加载？
  3. 未捕获错误：不变冲突：元素类型无效：应为字符串（用于内置组件）或类/函数，但得到：对象
  4. 使用es6类时，React中的“super（）”和“super（props）”有什么区别？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with