Question

ReactJS n00b，尝试构建一个简单，可重用的＆lt;选择＆gt; ReactJS中的组件带有onClick回调。我没有收到任何控制台或webpack错误，但是当我更改所选选项时没有发生任何事情。 Caster.js 从'react'导入React; 从'react-dom'导入ReactDOM; 从'./SelectSchool'导入{SelectSchool}; 从'./Button'导入{Button}; export class Caster扩展了React.Component { 构造函数（道具）{ 超级（道具）; ... this.handleChange = this.handleChange.bind（this）; this.handleClick = this.handleClick.bind（this）; } handleChange（E）{ 的console.log（ 'handleChange'）; // TEST - 控制台中没有任何内容 var value = e.target.value; this.setState（{casterSchool：value}）; this.props.select（值）; console.log（'value：'+ value）; // TEST - 控制台中没有任何内容 } render（）{ 回来（＆lt; div className =“instance-wrap”＆gt; ＆lt; div className =“input-row”＆gt; ＆lt; SelectSchool phaseSelect =“select-caster”onChange = {this.handleChange} /＆gt; ... ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ）; } } SelectSchool.js 从'react'导入React; 从'react-dom'导入ReactDOM; 导出类SelectSchool扩展了React.Component { render（）{ 回来（＆lt; div className =“input-wrap”＆gt; ＆LT;标签＆gt;学校与LT; /标签＆gt; ＆lt; select className = {this.props.phaseSelect} value = {this.props.value} onChange = {this.props.handleChange}＆gt; ＆lt; option value ='alteration'＆gt; Alteration＆lt; / option＆gt; ... ＆lt; option value ='divination'＆gt;占卜＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; ）; } } SelectSchool.defaultProps = {phaseSelect：'default'}; 非常感谢任何帮助或建议。

Answer 1

您传递给示例<SelectSchool的道具的名称是onChange，但在您尝试访问this.props.handleChange的组件内（没有此类道具）。< / p>

您应该使用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} />

在ReactJS表单中处理<select>组件更改

1 个答案: