javascript - 处理 ReactJS 表单中的 组件更改

转载 作者：行者123 更新时间：2023-11-30 21:13:52 25 4

ReactJS n00b，尝试使用 onClick 回调在 ReactJS 中构建一个简单、可重用的

组件。我没有收到任何控制台或 webpack 错误，但是当我更改所选选项时没有任何反应。Caster.js import React from 'react';import ReactDOM from 'react-dom';import { SelectSchool } from './SelectSchool';import { Button } from './Button';export class Caster extends React.Component { constructor(props) { super(props); ... this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); } handleChange(e){ console.log('handleChange'); // TEST - nothing appears in console var value = e.target.value; this.setState({casterSchool: value}); this.props.select(value); console.log('value: ' + value); // TEST - nothing appears in console } render() { return ( <div className="instance-wrap"> <div className="input-row"> <SelectSchool phaseSelect="select-caster" onChange={this.handleChange} /> ... </div> </div> ); }}SelectSchool.js import React from 'react';import ReactDOM from 'react-dom';export class SelectSchool extends React.Component { render() { return ( <div className="input-wrap"> <label>School</label> <select className={this.props.phaseSelect} value={this.props.value} onChange={this.props.handleChange}> <option value='alteration'>Alteration</option> ... <option value='divination'>Divination</option> </select> </div> ); } }SelectSchool.defaultProps = { phaseSelect: 'default' };非常感谢任何帮助或建议。 最佳答案 传递给 <SelectSchool 的 Prop 名称在你的例子中是 onChange但在您尝试访问的组件内部 this.props.handleChange (没有这样的 Prop )。你应该使用 this.prop.onChange或传递 handleChange={this.handleChange}到组件。选项 1: <select className={this.props.phaseSelect} value={this.props.value} onChange={this.props.onChange}>选项 2: <SelectSchool phaseSelect="select-caster" handleChange={this.handleChange} /> 关于javascript - 处理 ReactJS 表单中的 <select> 组件更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45873113/ 上一篇：javascript - 第二个值在 redux/react 中以未定义的形式返回 下一篇：javascript - Featherlight.js - 如何更新已经打开的 featherlight iframe 的属性 相关文章： javascript - JSX 元素类型 'Line' 不是 JSX 元素的构造函数 javascript - react |如何检测页面刷新(F5) javascript - 基于对象数组过滤对象数组 javascript - React 将我的组件渲染为其名称，而不是其中的内容 javascript - 为什么 Mapbox everyLayer 函数不会在每次加载页面时触发？ javascript - 无法使用 Google Analytics 跟踪在 React Web 应用程序上花费的时间 javascript - 网络音频 API 延迟后停止 javascript - 通过模式复选框选择将一个文档添加到另一个文档 javascript - 在插件函数中调用 html 数据集 javascript - 在 div 标签中使用 javascript 将 UL 添加到 HTML 时被捕获并出错 ©2023 IT工具网  联系我们